Router is not rendering in react-router-dom v5.0.0

[KosKou]

Version

I'm using react-router-dom v5.0.0

Test Case

https://codesandbox.io/s/31vx2njxn1

Steps to reproduce

Go to password field and write: dummy

Expected Behavior

Render the HeaderComponent to update the links that must appear into the nav bar after user logged in.

Actual Behavior

The actual version (5.0.0) is not re-rendering the component after the user has logged in, the system must valid the boolean value called isUserLoggedIn that is defined in AuthenticationService.js, that value gets the item saved into the sessionStorage.

The LoginComponent has a simple method called loginClicked() where validates the username and password and ref to /welcome/username using this.props.history.push() that changes the url and page but does not update the nav bar where validates which links are going to be displayed.

This issue does not appear in react-router-dom 4.3.1.

Is there another way to set my components and methods to re-render the nav bar?

[sudhiry]

HeaderComponent was not getting re-rendered as props are not getting changed for the component.
There are 3 ways to fix this.

1. Make HeaderComponent part of the other components (Login, Welcome)
2. Create Higher Order Component which wraps HeaderComponent and other components (Login, Welcome) together.
3. Create Context for the authentication service which will be responsible for the component to update.

[KosKou]

Thanks for the quick response dude, i have solved it by adding withRouter(HeaderComponent) at the default export.

[mhanchini]

Thanks for the quick response dude, i have solved it by adding withRouter(HeaderComponent) at the default export.

could you please show me which code Router(HeaderComponent) that I have to change. I am using react-router-dom 5.1.2 and still not updated the "re-render the nav bar"

[mayank8318]

@mhanchini Here is the sample code:

import React, { Component } from "react";
import {Link, withRouter} from 'react-router-dom'
import AuthenticationService from './AuthenticationService.js'

class HeaderComponent extends Component {
    render() {
        const isLoggedIn = AuthenticationService.isLoggedIn()
        console.log(isLoggedIn)
        return (
            <header>
                <nav className="navbar navbar-expand-md navbar-dark bg-dark">
                    <div><a href="#" className="navbar-brand">Brand</a></div>
                    <ul className="navbar-nav">
                        {isLoggedIn && <li><Link to="/welcome/mayank" className="nav-link">Home</Link></li>}
                        {isLoggedIn && <li><Link to="/todos" className="nav-link">Todos</Link></li>}
                    </ul>
                    <ul className="navbar-nav navbar-collapse justify-content-end">
                        {!isLoggedIn && <li><Link to="/login" className="nav-link">Login</Link></li>}
                        {isLoggedIn && <li><Link to="/logout" className="nav-link" onClick={AuthenticationService.logout}>Logout</Link></li>}
                    </ul>
                </nav>
            </header>
        )
    }
}

export default withRouter(HeaderComponent)

[kyocoolcool]

@mayank8318 thanks your support, it's worked.