React router 4 does not update view on link, but does on refresh

Question

I am using the following simple nav code

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

The URL changes but the view does not. It does however change when I refresh the page or manually go to that URL.

Then I think probably you have the same problem which I have described in this answer http://stackoverflow.com/questions/43892050/react-router-4-x-privateroute-not-working-after-connecting-to-redux/43892528#answer-43892528 — Tharaka Wijebandara, May 10 '17 at 14:48

score 55 · Answer 1 · answered Jul 11 '17 at 14:09

55

You can also use the:

import { withRouter } from 'react-router-dom';

And then on your export default, you do like this:

export default withRouter(connect(mapStateToProps, {})(Layout));

Because when you have an export connect, you need to tell that that component will be using the router.

answered Jul 11 '17 at 14:09

daminufe

924
1
7
13

We can use redux then how can we apply this method? – Bhavin Thummar Dec 06 '19 at 12:46
I have same proble of view not udpate but we have not used the redux then what was the issue for that or how can we apply your solution in our code? – Bhavin Thummar Dec 06 '19 at 12:47
I ran into the same issue recently, without using redux, looking for solution also – Derrick.X Jul 10 '22 at 02:37

Tomasz Mularczyk · Answer 2 · 2018-01-03T11:41:25.040

31

This is because react-redux connect method implements shouldComponentUpdate which will cause component not to render when props didn't change. And this is conflicting now with react-router 4.

To avoid it you can pass {pure: false} to connect as described in react-redux troubleshooting section.

Another way is to use withRouter HOC or pass location prop like described in DOCS.

edited Jan 03 '18 at 11:41

answered Jun 15 '17 at 10:50

Tomasz Mularczyk

34,501
19
112
166

score 5 · Answer 3 · answered Oct 09 '18 at 11:33

5

I had my Navlinks in a stateless-component (or dumb component) and a container to control the collapse-state of my navbar.

after switching the navbar-container from PureComponent to Componentit solved the problem for me.

answered Oct 09 '18 at 11:33

Tom Schinelli

51
1
2

score 2 · Answer 4 · answered Aug 04 '21 at 00:25

Have you tried making sure that your router tags wrap the entire chunk of code?

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>

  <NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

  <NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>
</Router>

It looks odd, but including links into the <Router> propagates your path change to router components when you click the link and actually renders the component you are routing to. Just fixed a very similar problem myself.

score 1 · Answer 5 · answered Jun 11 '18 at 16:01

1

I have encountered this problem. I resolve it by add attribute key to component Switch with value is a location pathname and location search.

answered Jun 11 '18 at 16:01

EST-TQ

34
2

That worked for me! Now it works when I change manually the url. Example: `` loc comes from useLocation(). Remember to call it in a child component of Router – itsjavi Mar 31 '21 at 03:18

React router 4 does not update view on link, but does on refresh

5 Answers5

Linked