title: Stay on same component of page after refresh browser in ReactJS
body: <p>I am very new to ReactJS. My query is I want to stay on same component of page in ReactJS. Below is my code.</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom'
  
  import { authenticationService } from './_service/authentication.service'
  
  
  import { PrivateRoute } from './components/Routes/PrivateRoute'; 
  import Navbar from './components/Navbar/Navbar' 
  import Landing from './components/Landing/Landing'
  import Login from './components/Login/Login' 
  import Register from './components/Register/Register' 
  import Home from './components/Home/Home'
  import SideBar from './components/SideBar/SideBar';
  
  class App extends Component {   render(){
      return (      
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Navbar /&gt;             
            {authenticationService.currentUserValue ? &lt;SideBar/&gt; : null}                                    
            &lt;Route exact path="/" component={Landing} /&gt;
            &lt;div className="container"&gt;
              &lt;Route exact path="/register" component={Register} /&gt;
              &lt;Route exact path="/login" component={Login} /&gt;                        
              &lt;PrivateRoute exact path="/home" component={Home} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;      
      )   } }
  </code></pre>
  
  <p>Above route is main route file of my project after login it redirects me to home page. On Home page i am loading Header, Sidebar and Content(Component). Here the content(Component) is different which depends on sidebar links. </p>
  
  <p>Home.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router} from 'react-router-dom'
  
  // import Home from './components/Home/Home'
  import { authenticationService } from '../../_service/authentication.service'
  // import Navbar from '../Navbar/Navbar'
  import Sidebar from '../SideBar/SideBar'
  // import Landing from '../Landing/Landing'
  import Profile from '../Profile/Profile'
  import AboutUs from '../Profile/AboutUs'
  
  class Home extends Component {
      constructor(props){
          super(props);        
  
          if (authenticationService.currentUserValue) { 
              // this.props.history.push('/home');
              this.props.history.push('/home');//this.state.initialPage
          }
          this.state={
              initialPage:&lt;Profile/&gt;
          }
      }
  
      routeSidebar = (flag) =&gt; {
  
          switch(flag) {
              case 'AboutUs':
                  this.setState({
                      initialPage:&lt;AboutUs/&gt;
                  })
                  break;
              default:
                  this.setState({
                      initialPage:&lt;Profile/&gt;
                  })
                  break;
          }        
      }
      render() {  
          const {initialPage} = this.state; 
          return (
                  &lt;Router&gt;
                      &lt;div className="Home"&gt;
                      &lt;Sidebar routeSidebar={this.routeSidebar} /&gt;
                      {initialPage}
                      &lt;/div&gt;                
                  &lt;/Router&gt;   
          );
      }
    }
  
    export default Home;
  </code></pre>