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 53 · Answer 1 · answered Jul 11 '17 at 14:09

53

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

894
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

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

30

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

27,156
17
99
146

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 1 · Answer 4 · 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

TDQ

11
1

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

4 Answers4

Linked