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;