reactjs - React Router 4.x-连接到Redux后PrivateRoute不起作用

与Redux连接后，示例https://reacttraining.com/react-router/web/example/auth-workflow中可用的PrivateRoute不起作用。

我的PrivateRoute看上去与原始版本几乎相同，但是仅连接到Redux并在原始示例中使用了它而不是fakeAuth。

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
   {...rest}
   render={props =>
   auth.isAuthenticated
    ? <Component {...props} />
    : <Redirect to={{ pathname: "/login" }} />}
  />
);

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果：-


不起作用，但希望并期望起作用


<PrivateRoute path="/member" component={MemberPage} />

工作，但不希望这样使用


<PrivateRoute path="/member" component={MemberPage} auth={auth} />

工作。只是工作，但根本不想使用。从这一点上可以理解，如果您将原始的PrivateRoute连接到Redux，则需要传递一些额外的道具（任何道具）以使PrivateRoute正常工作，否则它将不起作用。任何人，请对此行为提供一些提示。这是我的主要问题


<PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />

最佳答案

与@Tharaka答案互补，您可以按照react-redux troubleshooting section中的说明将{pure: false}传递给connect方法。

React-redux对shouldComponentUpdate钩子中的props进行了浅层比较，以避免不必要的重新渲染。如果上下文道具发生了变化（反应路由器），则不会对其进行检查，并且会假设没有任何变化。

{ pure:false }只是禁用此浅表比较。