React router v4 中的渲染方法 returns null

Question

我正在尝试使用 react-router v4 和 redux 实现私有路由，但由于某些原因，render prop returns 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));

参考文献-

React router v4 中的渲染方法 returns null

Render method returns null in react router v4

reactjs

redux

react-router

react-router-redux

redux-router