Отображать условно элементы панели навигации после входа в систему React без обновления страницы

Question

У меня в компоненте приложения есть следующие маршруты:

state = {
        routes: [
            { path: '/movies', name: "Movies" },
            { path: '/customers', name: "Customers" },
            { path: '/rentals', name: "Rentals" }
        ]
}

componentDidMount = () => {
    const user = authService.getCurrentUser();
    this.setState({ user });
}

render() {
    const { routes, user } = this.state;
    return (
        <div>
            <ToastContainer />
            <Navbar 
                routes={routes} 
                user={user} />
            <main role="main" className="container">
                <Switch>
                    <Route path="/register" component={RegisterForm} /> 
                    <Route path="/login" component={LoginForm} /> 
                    <Route path="/logout" component={Logout} /> 
                    <ProtectedRoute path="/movies/:id" component={MovieForm} />   
                    <ProtectedRoute path="/profile" component={Profile} />    
                    <Route 
                        path="/movies" 
                        render={props => <Movies {...props} user={user}/>}>
                    </Route>
                    <Route path="/customers" component={Customers} />
                    <Route path="/rentals" component={Rentals} />
                    <Route path="/not-found" component={NotFound} />
                    <Redirect from="/" exact to="/movies" />
                    <Redirect to="/not-found" />
                </Switch>
            </main>
        </div>
    )
}

Тогда компонент Navbar является компонентом без сохранения состояния:

const Navbar = ({ routes, user }) => {
    return ( 
        <header>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <Link className="navbar-brand" to="/movies">Video App</Link>
                    <button 
                        className="navbar-toggler" 
                        type="button" data-toggle="collapse" 
                        data-target="#navbarCollapse" 
                        aria-controls="navbarCollapse" 
                        aria-expanded="false" 
                        aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarCollapse">
                    <ul className="navbar-nav mr-auto">
                        {routes.map(route => {
                            return (
                                <li 
                                    className="nav-item"
                                    key={route.name}>
                                    <NavLink 
                                        className="nav-link" 
                                        to={route.path}>
                                        {route.name}
                                    </NavLink>
                                </li>
                            )
                        })}
                        {!user ? 
                            <React.Fragment>
                                <li className="nav-item">
                                    <NavLink 
                                        className="nav-link" 
                                        to='/login'>
                                        Login
                                    </NavLink>
                                </li>
                                <li className="nav-item">
                                    <NavLink 
                                        className="nav-link" 
                                        to='/register'>
                                        Register
                                    </NavLink>
                                </li>
                            </React.Fragment>
                            : 
                            <React.Fragment>
                                <li className="nav-item">
                                    <NavLink 
                                        className="nav-link" 
                                        to='/profile'>
                                        {user.name}
                                    </NavLink>

                                </li>
                                <li className="nav-item">
                                    <NavLink 
                                        className="nav-link" 
                                        to='/logout'>
                                        Logout
                                    </NavLink>
                                </li>
                            </React.Fragment>
                        }
                    </ul>
                </div>
            </nav>
        </header>
    );
}

Я хотел бы условно отображать определенные элементы панели навигации, когда пользовательне авторизован и когда залогинен.

В первом случае я хотел бы, чтобы отображались элементы входа, зарегистрировать элементы nav, а во втором - имя пользователя и выход из системы.Если пользователь не авторизован и входит в систему, если я использую this.props.history.push('/'); в компоненте Login, потому что я проверяю, существует ли объект user при монтировании компонента, это происходит только один раз, и панель навигации после входа в систему содержит элементы панели навигации, которыенеавторизованный пользователь может видеть.

Чтобы преодолеть эту проблему, я использовал window.location = '/';, чтобы вызвать полное обновление страницы и звонить componentDidMount каждый раз, когда пользователь входит в систему, но у меня вопрос, есть ли способ избежать этого?

Есть ли способ перенаправить пользователя на главный экран без обновления страницы и загрузить нужные элементы в навигационную панель?