Render方法在react路由器v4中返回null

Question

我正在尝试使用react-router v4和redux实现私有路由，但render prop因某种原因返回null。如果有人帮助我找出问题所在，我将非常感激。路由器：

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

您可能正面临React Router与Update Blocking的问题。这是因为Redux避免重新渲染并调用mapStateToProps。

为了防止这种行为，你可以在react-redux连接函数中传递pure: false选项。

例：

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

您可以前往React Redux API documentation查看有关此选项的更多详细信息。

Answer 2

作为替代，你可以使用withRouter

import { withRouter } from 'react-router-dom';
.
.
export default withRouter(connect(mapStateToProps)(AppRoutes));

引用 -

1. https://github.com/ReactTraining/react-router/issues/4671
2. https://reacttraining.com/react-router/web/api/withRouter