title: React Switch Route without reload all page
body: <p>I know that in internet is a lot of examples, but I can't resolve my problem.</p>
  
  <p>I have Router with Route. I want to dynamic load part of page in background and replace them. When I click link in menu, all page is reloading, not update part of page.</p>
  
  <p>How to modify this code for load component from server and replace part of page?</p>
  
  <p>Better for me, will be show working examples and I try thinking where make changes.</p>
  
  <p>I'm using <code>webpack</code> and <code>semantic-ui-react</code></p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import Main from './pages/Main.jsx';
  import Company from './pages/Company.jsx';
  import Account from './pages/Account.jsx';
  import Contact from './pages/Contact.jsx';
  
  import { Router, Route, Switch, History, withRouter } from "react-router";
  import { createBrowserHistory } from 'history';
  
  import MainMenu, {VerticalSidebar} from './MainMenu.jsx';
  import Footer from './Footer.jsx';
  
  
  import 'semantic-ui-css/semantic.min.css';
  import './style.css';
  
  import { Sidebar, Component} from 'semantic-ui-react'
  
  
  export class App extends React.Component {
      state = {
          dimmed: false,
          visible: false,
          width: 0,
          height: 0,
      }
      handleShowClick = () =&gt; {this.setState({
          visible: true,
          dimmed: true
      }),document.body.classList.add('hideOverflow')}
      handleHideClick = () =&gt; {this.setState({
          visible: false,
          dimmed: false
      }),document.body.classList.remove('hideOverflow')}
      handleSidebarHide = () =&gt; {this.setState({
          visible: false,
          dimmed: false
      }),document.body.classList.remove('hideOverflow')}
  
      updateDimensions(){
          document.querySelector('div.pushable div.pusher').style.minHeight = (window.innerHeight-document.querySelector('div.pushable div.footer').clientHeight-document.querySelector('div.pushable div.pusher div.menu').clientHeight)+'px';
      }
      componentDidMount(){
          this.updateDimensions();
          window.addEventListener("resize", this.updateDimensions.bind(this));
      }
  
      componentWillUnmount(){
          window.removeEventListener("resize", this.updateDimensions.bind(this));
      }
  
      render(){
          return (
          &lt;&gt;
              &lt;VerticalSidebar visible={this.state.visible} handleHideClick={this.handleHideClick}/&gt;
              &lt;Sidebar.Pushable as='div' &gt;
  
                  &lt;Sidebar.Pusher dimmed={this.state.dimmed} style={{width: '100%'}}&gt;
                  &lt;MainMenu handleShowClick={this.handleShowClick}/&gt;
      //I think that problem is below//////////
                      &lt;Router history={createBrowserHistory()}&gt;
                          &lt;Switch&gt;
                              &lt;Route exact path="/" component={Main} /&gt;
                              &lt;Route path="/companypage" component={Company} /&gt;
                              &lt;Route path="/accountpage" component={Account} /&gt;
                              &lt;Route path="/contactpage" component={Contact} /&gt;
                          &lt;/Switch&gt;
                      &lt;/Router&gt;
                  &lt;/Sidebar.Pusher&gt;
                  &lt;Footer/&gt;
              &lt;/Sidebar.Pushable&gt;
          &lt;/&gt;
          )
      }
  }
  
  ReactDOM.render(
      &lt;App/&gt;, document.getElementById('app')
  );
  </code></pre>
  
  <p>MainMenu.jsx</p>
  
  <pre><code>&lt;Menu&gt;
      &lt;Menu.Item as='a' href="/"&gt;
      &lt;Menu.Item as='a' href="/companypage"&gt;
      &lt;Menu.Item as='a' href="/accountpage"&gt;
      &lt;Menu.Item as='a' href="/contactpage"&gt;
  &lt;/Menu&gt;
  </code></pre>