React router dom show a component after user signs in

Question

I am using react-router-dom to navigating inside by reactjs app. My app.js looks like so:

return(
   <div>
      <BrowserRouter>
         <Route path="/signin" component={signin} />
         <SideBar />
         <Route path="/home" component={home} />
         <Route path="/user" component={user} />
         <Route path="/settings" component={settings} />
      </BrowserRouter>
   </div> 
);

My question is I want to show <SideBar /> only if a user has already logged in. But as seen from the current code, it is displayed even in the signin page. What is the best approach to achieve this?