React Router work on reload, but not when clicking on a link : <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>
