CODEWITHSUNDEEP
reactjsreduxreact-router
David Kennell
David Kennell

Reputation: 1227

React-router: components don't render unless refreshed

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>

Upvotes: 4

Views: 1654

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36209

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

Upvotes: 1

Related Questions