reactjs - React Router work on reload, but not when clicking on a link

Question

I have setup the React with react-router 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 http://localhost:8080/categories), but the content don't get updated (But if I do a refresh, it gets updated).

Below is my setup:

The Routes.js setup as follows:

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 = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

The link I use in Nav.js are as follows:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

The App.js is as follows:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

Answer 1

I would go through your components and make sure you have only one <Router> ... </Router>. Also -- make sure you have a <Router>...</Router> There may be cases when you'd use more than one, but if you accidentally have nested routers (because you were hacking quickly and forgot to remove one when you were moving it around to all kinds of places ;-) - it could cause an issue.

I would try

import {
  BrowserRouter as Router,
}  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

In your top most component (App.js).