title: Handle URL changes in React
body: <p>I am new to React and currently taking this tutorial on Youtube. <a href="https://www.youtube.com/watch?v=5Bytq6LNDO4&amp;t=599s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=5Bytq6LNDO4&amp;t=599s</a>
  I am using v4 of React-Router so i have to change a few things.</p>
  
  <p>At my code, the url is changing when I press the buttons at the NavBar, but the content of the different Components won't get rendered :/</p>
  
  <p>Here is my Code:</p>
  
  <p>Store.js</p>
  
  <pre><code>import { compose, createStore, applyMiddleware } from 'redux';
  import { createBrowserHistory } from 'history';
  import { syncHistoryWithStore } from 'react-router-redux';
  import { createLogger } from 'redux-logger';
  import rootReducer from './reducers';
  
  const middleware = [
    createLogger()
  ];
  
  const enhancers = compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : f =&gt; f
  );
  
  /**
  * CREATE STORE
  */
  const store = createStore(
    rootReducer,
    {},
    enhancers
  );
  
  export const history = syncHistoryWithStore(createBrowserHistory(), store);
  
  export { store };
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>import React from 'react';
  import {Router, Route } from 'react-router';
  import { HomeView, Login, SignUp } from './modules';
  import { history } from './redux/store';
  import App from './App';
  
  export default () =&gt; (
  &lt;Router history={history}&gt;
    &lt;div&gt;
      &lt;Route path="/" component={App} /&gt;
      &lt;Route exact path="/" component={HomeView} /&gt;
      &lt;Route path="/login" component={Login} /&gt;
      &lt;Route path="/signup" component={SignUp} /&gt;
    &lt;/div&gt;
  
  &lt;/Router&gt;
  );
  </code></pre>
  
  <p>Navbar.js</p>
  
  <pre><code>import React from 'react';
  import {Menu} from 'semantic-ui-react';
  import { createBrowserHistory } from 'history';
  import logo from '../../logo.png';
  import './style.css'
  
  const history = createBrowserHistory();
  
  const NavBar = () =&gt; (
    &lt;Menu&gt;
      &lt;Menu.Menu&gt;
        &lt;Menu.Item&gt;
          My full feature &lt;img src={logo} alt="logo" className="NavBar-logo"/&gt;
        &lt;/Menu.Item&gt;
      &lt;/Menu.Menu&gt;
  
      &lt;Menu.Menu position="right"&gt;
        &lt;Menu.Item onClick={() =&gt; history.push('/signup')}&gt;
          Sign Up
        &lt;/Menu.Item&gt;
        &lt;Menu.Item onClick={() =&gt; history.push('/login')}&gt;
          Login
        &lt;/Menu.Item&gt;
      &lt;/Menu.Menu&gt;
  
    &lt;/Menu&gt;
  );
  
  export default NavBar;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {NavBar} from './modules';
  
  import './App.css';
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;NavBar /&gt;
    &lt;/div&gt;
  );
  
  export default App;
  </code></pre>