React路由器4.x-连接到Redux后PrivateRoute不工作

Question

示例中提供了PrivateRoutehttps://reacttraining.com/react-router/web/example/auth-workflow 与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);

用法和结果：-

• 不起作用，但需要




Answer 1

这是react redux中的一个已知问题，您可以在这里阅读更多有关这方面的内容。问题是，connectHoC已经实现了shouldComponentUpdate，这样如果道具没有更改，包装的组件就不会重新加载。由于react router使用上下文传递路由更改，所以当路由更改时，包装的组件不会重新加载。但他们似乎要删除react redux 5.1版本中的shouldComponentUpdate。目前，作为一种解决方法，我将一个来自路由器的道具（如this.props.match.params）传递给连接的子组件，即使我在内部不使用它。但它会使组件在每次路由更改时重新招标。

Answer 2

根据react路由器文档，您可以将您的connect功能包装为withRouter：

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

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

这对我有用。

Answer 3

作为@Tharaka答案的补充，您可以将{pure:false}传递到连接方法，如react-redux疑难解答部分所述。

React redux在shouldComponentUpdatehook中对道具进行了粗略的比较，以避免不必要的重新渲染。如果上下文道具发生了变化（react router），它不会对此进行检查，并假定没有任何变化。

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