渲染方法在反应路由器 v4 中返回 null答案

【问题标题】：Render method returns null in react router v4渲染方法在反应路由器 v4 中返回 null
【发布时间】：2017-10-05 08:04:36
【问题描述】：

我正在尝试使用 react-router v4 和 redux 实现私有路由，但由于某种原因，渲染道具返回 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)

【问题讨论】：

标签： reactjs redux react-router react-router-redux redux-router

【解决方案1】：

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

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

例子：

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

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

【讨论】：

谢谢，不知道，稍后再读。我通过删除 TopSecretRoute 组件并将我需要的行为封装在一个高阶组件中解决了这个问题，这也是一个选项。
是的，解决这个问题的方法不止一种。很高兴它成功了。

【解决方案2】：

您可以使用withRouter作为替代方法

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

参考资料-

【讨论】：