title: React Router work on reload, but not when clicking on a link
body: <p>I have setup the React with <code>react-router</code> version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g <a href="http://localhost:8080/categories" rel="noreferrer">http://localhost:8080/categories</a>), but the content don't get updated (But if I do a refresh, it gets updated). </p>
  
  <p>Below is my setup:</p>
  
  <p>The <strong>Routes.js</strong> setup as follows:</p>
  
  <pre><code>import { Switch, Route } from 'react-router-dom';
  import React from 'react';
  
  // Components
  import Categories from './containers/videos/Categories';
  import Videos from './containers/videos/Videos';
  import Home from './components/Home';
  
  const routes = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/" component={Home}/&gt;
      &lt;Route path="/videos" component={Videos}/&gt;
      &lt;Route path="/categories" component={Categories}/&gt;
    &lt;/Switch&gt;
  );
  
  export default routes;
  </code></pre>
  
  <p>The link I use in <strong>Nav.js</strong> are as follows:</p>
  
  <pre><code>&lt;Link to="/videos"&gt;Videos&lt;/Link&gt;
  &lt;Link to="/categories"&gt;Categories&lt;/Link&gt;
  </code></pre>
  
  <p>The <strong>App.js</strong> is as follows:</p>
  
  <pre><code>import React from 'react';
  import './app.scss';
  import Routes from './../routes';
  import Nav from './Nav';
  
  class AppComponent extends React.Component {
  
    render() {
      return (
        &lt;div className="index"&gt;
          &lt;Nav /&gt;
          &lt;div className="container"&gt;
            &lt;Routes /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  AppComponent.defaultProps = {
  };
  
  export default AppComponent;
  </code></pre>