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

IT技术 reactjs redux react-router-redux react-router-v4 react-router-dom
2021-05-02 02:36:01

示例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}} />
3个回答

作为对@Tharaka 答案的补充，您可以按照react-redux 故障排除部分中的描述传递{pure: false}给connect方法。

React-redux对shouldComponentUpdatehook 中的 props 进行浅层比较，以避免不必要的重新渲染。如果上下文props发生变化（react-router），它不会检查它并假设没有任何变化。

{ pure:false } 简单地禁用这种浅比较。

根据react-router 文档，您可以使用以下命令包装您的connect函数withRouter：

// before
export default connect(mapStateToProps)(Something)

// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

这对我有用。

这是 react-redux 中的已知问题，您可以在此处阅读更多相关信息。问题是connectHoC 已实现shouldComponentUpdate，因此如果props未更改，则包装的组件不会重新呈现。由于 react-router 使用上下文来传递路由更改，因此当路由更改时，包装的组件不会重新渲染。但似乎他们将shouldComponentUpdate在 5.1 版本的 react-redux 中删除。目前，作为一种解决方法，我将来自 Router 的 prop 传递this.props.match.params给连接的子组件，即使我没有在内部使用它。但是每次路由改变时都会重新渲染组件。

其它你可能感兴趣的问题
上一篇React / Redux 中树结构和 shouldComponentUpdate 的性能问题 下一篇Cura 不允许使用完整的打印区域