I'm using React and I have a component TheNavbar.js
that, depending on its status, (specifically if the user is logged in or not), shows one html or another.
After the user logs in or exits the app, the user is automatically redirected either to your main page or to the home page. The problem is that when you are redirected, even though you are already logged in (or have exited the app), the rendered html TheNavbar.js
remains the same. It is not until the page is refreshed (F5), then the rendered html does change.
This is the code, componentDidMount()
what is done is to check if the user is logged in or not, and then the status is updated. Then the conditional html rendering depends on whether this state is on true
orfalse
export default class TheNavbar extends Component {
state = {
session: false
}
async componentDidMount(){
const session = await Auth.currentSession();
if(session){
this.setState({
session: true
})
}
}
handleLogOut = (event) => {
event.preventDefault()
try{
Auth.signOut()
this.props.authentication.setAuthStatus(false)
this.props.authentication.setUser(null)
} catch (err) {
console.log(err);
}
setTimeout(() => this.props.history.push('/'), 300);
}
render() {
if(!this.state.session){
return (
<div>
<Navbar className="navbar-cont" collapseOnSelect expand="lg" bg="primary" variant="dark">
<Navbar.Brand className="logo" href="/">Mapit</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="about">Funcionalidades</Nav.Link>
<Nav.Link href="#pricing">Precios</Nav.Link>
<NavDropdown title="Mas" id="collasible-nav-dropdown">
<NavDropdown.Item href="/contact">Contacto</NavDropdown.Item>
<NavDropdown.Item href="/profile">Sobre el autor</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Button className="login-btn" variant="warning" href="/login">Login</Button>
<Button className="register-btn" variant="light" href="/register">Register</Button>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
} else {
return (
<div>
<Navbar className="navbar-cont" collapseOnSelect expand="lg" bg="primary" variant="dark">
<Navbar.Brand className="logo" href="/news">Mapit</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/addsite">Sitios</Nav.Link>
<Nav.Link href="/usergallery">Mi Galeria</Nav.Link>
<NavDropdown title="Mas" id="collasible-nav-dropdown">
<NavDropdown.Item href="/contact">Contacto</NavDropdown.Item>
<NavDropdown.Item href="/profile">Sobre el autor</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Button className="login-btn" variant="warning">Mi cuenta</Button>
<Button onClick={this.handleLogOut} className="register-btn" variant="light">Salir</Button>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
}