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

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


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).


Wrapping your component with withRouter should do the job for you. withRouter is needed for a Component that uses Link or any other Router props and doesn't receive the Router props either directly from Route or from the Parent Component

Router Props are available to the component when its called like

<Route component={App}/>

or

<Route render={(props) => <App {...props}/>}/>

or if you are placing the Links as direct children of Router tag like

<Router>     <Link path="/">Home</Link></Router>

In case when you wish to write the child content within Router as a component, like

<Router>     <App/></Router>

The Router props won't be available to App and hence, you could pass call it using a Route like

<Router>     <Route component={App}/></Router>

However withRouter comes in Handy when you want to provide the Router props to a highly nested component. Check this solution

import {withRouter} from 'react-router'class AppComponent extends React.Component {  render() {    return (      <div className="index">        <Nav />        <div className="container">          <Routes />        </div>      </div>    );  }}AppComponent.defaultProps = {};export default withRouter(AppComponent);


There should be only one ROUTER in the whole app, which I think if your head file is App.js, then the ROUTER should wrap the whole App.js component.