Как изменить панель навигации, когда пользователь входит и выходит?

Итак, я понимаю, как создавать отдельные компоненты, такие как форма, панель навигации и нижний колонтитул, но я не понимаю, как изменить состояние панели навигации, когда пользователь выходит из системы.

Например, страница входа в систему должна иметь форму с очень простой навигационной панелью и парой навигационных ссылок, но как только пользователь вошел в систему, навигационная панель должна включать навигационные ссылки «выход» и нижний колонтитул с парой навигационных ссылок, как Что ж.

Проблема, с которой я сталкиваюсь, когда я делаю свою, заключается в том, что когда я нажимаю ссылку «выйти», она отображает страницу входа, НО когда я нажимаю одну из других навигационных ссылок, панель навигации повторно отображает «вошедшую в систему» ​​версию.

CustomNavbar.js

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';

class CustomNavbar extends Component {

render() {
    if (this.props.userID === null) {
        return (
            <div>
                <Navbar collapseOnSelect expand = "md" bg = "dark" variant = "dark">
                    <Navbar.Brand href = "/">
                        Ndnu's Notes
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls = "responsive-navbar-nav" />
                    <Navbar.Collapse id = "responsive-navbar-nav">
                    </Navbar.Collapse>
                </Navbar>
                <Navbar className = "footer text-center" fixed = "bottom" expand = "lg" bg = "light">
                    <Nav.Link href = "/contactus">Contact Us</Nav.Link>
                    <Nav.Link href = "/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href = "/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    } else {    
        return (
            <div>
                <Navbar collapseOnSelect expand = "md" bg = "dark" variant = "dark">
                    <Navbar.Brand href = "/">
                    Ndnu's Notes
                </Navbar.Brand>
                <Navbar.Toggle aria-controls = "responsive-navbar-nav" />
                    <Navbar.Collapse id = "responsive-navbar-nav">
                        <Nav className = "mr-auto">
                        </Nav>
                        <Nav>
                            <Nav.Link eventKey = {2} href = "/myAccount"> <i class = "fas fa-user"></i> My Account</Nav.Link>
                            <Nav.Link eventKey = {1} href = "/" onClick = {this.props.logUserOut}> <i class = "fas fa-sign-out-alt"></i> Log Out</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>

                {/* Footer */}
                <Navbar fixed = "bottom" bg = "light">
                    <Nav.Link href = "/contactus">Contact Us</Nav.Link>
                    <Nav.Link href = "/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href = "/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    }
}
}
export default CustomNavbar

App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginAndRegister from './LoginAndRegister'
import ContactUs from './Components/ContactUs.js';
import PrivacyTerms from './Components/PrivacyTerms.js';
import CustomNavbar from './Components/CustomNavbar.js';
import About from './Components/About.js';
import Table from './Components/Table.js';

class App extends React.Component {


constructor() {
    super();
    this.state = {
        userID:
    }
}
logUserOut = (e) => {
    e.preventDefault()
    this.setState({userID: null});
}

render() {
    return (
        <Router>
            <div>
                <CustomNavbar userID = {this.state.userID} logUserOut = {this.logUserOut} />
                <Route exact strict path = "/contactus" component = {ContactUs} />
                <Route exact strict path = "/about" component = {About} />
                <Route exact strict path = "/privacyterms" component = {PrivacyTerms} />
                  {!this.state.userID && <LoginAndRegister userID = {this.state.userID}/>}
                <Table />
            </div>
        </Router>
    )
}
}

export default App;