-1
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;