Hide a Navbar item in React JS according to the page

Question

I am new to using React, I took courses in Alura, but many doubts remain because it is something very new for me. I have a login page, this login page is using a Header that is used in all other pages of the project. This Header has a Navbar with some buttons, one of these buttons is the "Login" that leads to the Login page. My problem is: I need to hide the Login button only when I am on the Login page, and how do I do this?

Login.js

import React, { Component } from 'react'; 
import Header from '../../Components/Header/Header'; 
import 'materialize-css/dist/css/materialize.min.css'; 
import M from 'materialize-css'; 
import '../App/App.css'; 
import AccountCircle from '@material-ui/icons/AccountCircle'; 
import Lock from '@material-ui/icons/Lock';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };   };

  componentDidMount() {
    M.Tabs.init(this.Tabs);   };

  render() {

    const { showResults } = this.state;

    return (
      <div className="App">
        <Header />
        // (resto do código da pagina)
      </div>

    );   
  } 
};

export default App;

Header.js

import React from "react";
import "../Header/Header.css";
import LinkWrapper from "../../Utils/LinkWrapper";

const Header = () => {
    return (
        <nav>
            <div className="nav-wrapper deep-purple">
                <LinkWrapper to="#"  activeStyle={{}} className="logoSpace"><i className="material-icons sizeLink"><img src="corset.png" className="logoSize"></img></i> Shop</LinkWrapper>
                <ul className="right hide-on-med-and-down">
                    <li><LinkWrapper to="#" className="waves-effect waves-light"><i className="material-icons sizeLink"><img src="search.png" className="sizeImg"></img></i></LinkWrapper></li>
                    <li><LinkWrapper to="badges.html"><i className="material-icons sizeLink"><img src="cart.png" className="sizeImg"></img></i></LinkWrapper></li>
                    <li><LinkWrapper to="/"><i className="sizeLogin">Login</i></LinkWrapper></li>
                </ul>
            </div>
        </nav>
    );
}
export default Header;

Linkwrapper.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const LinkWrapper = (props) => {
    return (
        <NavLink activeStyle={{ fontWeight: "bold" }} {...props} />
    );
};

export default LinkWrapper;

Answer 1

There is a window function that can help you with this first approach. It would be window.location.pathname. it returns the endpoint the browser is in.

{window.location.pathname !== "/login" ? <li><LinkWrapper to="/"><i className="sizeLogin">Login</i></LinkWrapper></li> : ''}

Follow how it would look down, please.

<div className="nav-wrapper deep-purple">
   <LinkWrapper to="#"  activeStyle={{}} className="logoSpace">
     <i className="material-icons sizeLink"><img src="corset.png" className="logoSize"></img></i> Shop
   </LinkWrapper>
   <ul className="right hide-on-med-and-down">
      <li><LinkWrapper to="#" className="waves-effect waves-light"><i className="material-icons sizeLink"><img src="search.png" className="sizeImg"></img></i></LinkWrapper></li>
      <li><LinkWrapper to="badges.html"><i className="material-icons sizeLink"><img src="cart.png" className="sizeImg"></img></i></LinkWrapper></li>
      {window.location.pathname !== "/login" ? <li><LinkWrapper to="/"><i className="sizeLogin">Login</i></LinkWrapper></li> : ''}
   </ul>
</div>

Answer 2

const Header = (props) => {
  const { login } = props;

  return (
    <div>
      { !login && <button> login </button> }
    </div>
  )  
}

const Login = () => {
  return (
    <div>
      <Header login />
      <form>
      ...
      </form>
    </div>
  )  
}