Render method returns null in react router v4

Question

I'm trying to implement a private route with react-router v4 and redux, but the render prop returns null for some reason. I'd be very grateful if someone helps me figure out what is wrong. Router:

const router = (
          <Provider store={store}>
            <BrowserRouter history={history}>
              <App>
                <Route exact path="/" component={UserGrid}/>
                <Route path="/login" component={Login}/>
                <Route exact path="/users/:userId" component={UserPage}/>
                <Route path="/registration" component={RegistrationPage}/>
                <TopSecretRoute path="/topSecret" component={SecretComponent}/>
              </App>
            </BrowserRouter>
          </Provider>

TopSecretRoute.js:

const TopSecretRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    props.session.registered ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const stateToProps = ['session']
export default createContainer(stateToProps,TopSecretRoute)

Answer 1

You are probably facing the problem React Router have with Update Blocking. This happens because Redux avoids re-renders and call mapStateToProps, instead.

To prevent this behavior your can pass the option pure: false in react-redux connect function.

Example:

connect(mapStateToProps, null, null, { pure: false })(Component);

You can head to React Redux API documentation to see more details on this option.