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

用法和结果： -

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

Answer 1

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

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

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

Answer 2

根据react-router documentation，您可以使用connect包裹withRouter函数：

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

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

这对我有用。

Answer 3

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

React Router 4.x - 连接到Redux

3 个答案: