3

I have a simple App component with Links to a User index and a Cache index (for a geocaching app). My Links render fine, and when clicked they change the path in the address bar, but nothing changes in the DOM until I refresh the page, at which point the page looks the way it should. What's going on here, and what's the conventional way of dealing with it? I am using Redux as well, if that makes any difference. The following is all of the JSX returned by my App component:

  <div>
    <nav>
      <Link to="/caches">Caches</Link>
      <Link to="/users">Users</Link>
    </nav>
    <div>
      <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/users" render={() => <div><UserList users={this.props.users}/></div>}/>
      <Route path="/caches" component={CacheList}/>
      </Switch>
    </div>
  </div>
David Kennell
  • 1,147
  • 2
  • 11
  • 22

1 Answers1

1

Its a common issue with react-router-4.

use {pure: false} in react-redux connect or use withRouter HOC.

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

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166