在连接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 path="/member" component={MemberPage} anyprop={{a:1}} />
作为@Tharaka答案的补充,您可以将{pure: false}
传递给connect
中描述的react-redux troubleshooting section方法。
React-redux对shouldComponentUpdate
钩子中的道具进行浅层比较,以避免不必要的重新渲染。如果上下文道具发生了变化(react-router),它就不会检查它并假设没有任何变化。
{ pure:false }
只是禁用了这种浅薄的比较。
根据react-router documentation你可以用connect
包装你的withRouter
函数:
// before
export default connect(mapStateToProps)(Something)
// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
这对我有用。
这是react-redux中的已知问题,您可以阅读有关此here的更多信息。问题是connect
HoC实施了shouldComponentUpdate
,因此如果props
没有改变,包裹的组件不会重新渲染。由于react-router使用上下文来传递路由更改,因此包装的组件在路由更改时不会重新呈现。但似乎他们将在5.1版本的react-redux中使用remove shouldComponentUpdate
。目前,作为一种解决方法,即使我不在内部使用它,我也会将像this.props.match.params
这样的路由器传递给连接的子组件。但是每当路线发生变化时,它都会重新渲染组件。