React Router 4 (beta 8) won't render components if using redux connect

Version

4.0.0-beta.8

If a component containing <Route> components is exported with a Redux connect wrapper non of the components mapped to those routes components are rendered. Let’s say you have

<BrowserRouter>
 <App />
</BrowserRouter>

and App looks like:

class App extends Component {

  render() {
    return (
      <div>
          <Route exact path="/" component={Home} />
          <Route path="/Test1" component={Test1}/>
          <Route path="/Test2" component={Test2} />
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

then none of the components get rendered on route changes. If you remove the connect wrapper all works as expected.

[hihuz]

Hey klase, I may be mistaken but I think this is exactly the problem I had these previous days. I was used to the v4 alpha API where doing what you shown above worked fine.

In the latest beta API however they kind of went back to their previous way of doing things (that is using react context exclusively to communicate changes), connect() prevents that from working by ways of shouldComponentUpdate.

They have provided again in the beta the withRouter() HOC that solves this nicely, just import it and do

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

This should work just fine after that. Note that you would also need to wrap any redux connected component that has router components inside it with a withRouter(). That means if you have router Links in your redux connected Nav component for example, you would need to wrap it with withRouter() as well.

Hope this helps.

Here is a helpful discussion over on the react-redux repo

[theduke]

This MUST be mentioned very prominently in the docs, it’s an issue many will run into.

I spent a long time scratching my head, trying to figure out why my routes aren’t working.

@timdorr