I've created an Web App Using the ReactJS, where I've LogIn Page -> Main Dashboard (Sidebar & Top Bar (Common to all Pages)

In Top Nav Bar I've LogOut Option.

Issue: When I click on Logout Button from the Main dashboard I'm able to navigate to Login Page (Authenticate Page) but the Sidebar and Top bar are still there. How can I Hide that When I Click on LogOut Button and Show only LogIn Page (Authentication page)

Because of some Security Reasons I can't share the Complete Code. So I'm Sharing the App.js file.

  class App extends React.Component {
  render() {
    return (
      <div>
        {/* Routing to navigate to proper screen/page`` */}
        <Router>
          <NavigationPage />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/opt1" component={opt1} />
            <Route path="/opt2" component={opt2} />
            <Route path="/opt3" component={opt3} />
            <Route path="/opt4" component={opt4} />
            <Route path="/opt5" component={opt5} />
            <Route path="/opt6" component={opt6} />
            <Route path="/opt7" component={opt7} />
            <Route path="/authenticate" component={Authenticate} />
          </Switch>
        </Router>
      </div>
    );
  }
}