Stay on same component of page after refresh browser in ReactJS

I am very new to ReactJS. My query is I want to stay on same component of page in ReactJS. Below is my code.

App.js

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 (      
      <Router>
        <div className="App">
          <Navbar />             
          {authenticationService.currentUserValue ? <SideBar/> : null}                                    
          <Route exact path="/" component={Landing} />
          <div className="container">
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" component={Login} />                        
            <PrivateRoute exact path="/home" component={Home} />
          </div>
        </div>
      </Router>      
    )   } }

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.

Home.js

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:<Profile/>
        }
    }

    routeSidebar = (flag) => {

        switch(flag) {
            case 'AboutUs':
                this.setState({
                    initialPage:<AboutUs/>
                })
                break;
            default:
                this.setState({
                    initialPage:<Profile/>
                })
                break;
        }        
    }
    render() {  
        const {initialPage} = this.state; 
        return (
                <Router>
                    <div className="Home">
                    <Sidebar routeSidebar={this.routeSidebar} />
                    {initialPage}
                    </div>                
                </Router>   
        );
    }
  }

  export default Home;

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2EyEJcd
via IFTTT