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

Question

示例 https://reacttraining.com/react-router/web/example/auth-workflow 中提供了 PrivateRoute连接 Redux 后不工作。

我的 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);

用法和结果:-

1. 不工作，但希望并期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 可以工作，但不希望这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作。只是为了工作，但根本不想使用。从这一点的理解是，如果你将原始 PrivateRoute 连接到 Redux，你需要传递一些额外的 props(任何 props)来使 PrivateRoute 工作，否则它不起作用。 任何人，请对此行为提供一些提示。这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />

Answer 1

作为@Tharaka答案的补充，您可以将{pure: false}传递给connect方法，如react-redux troubleshooting section中所述。 .

React-redux 在 shouldComponentUpdate 钩子(Hook)中对 props 进行浅层比较，以避免不必要的重新渲染。如果上下文 props 改变了(react-router)，它不会检查并假设没有任何改变。

{ pure:false } 只是禁用这种浅层比较。