我稍微调整了React Router示例,让私有路由与Redux一起玩得很好,但在链接或重定向到其他"页面"时没有呈现任何组件.这个例子可以在这里找到:
https://reacttraining.com/react-router/web/example/auth-workflow
他们的PrivateRoute组件如下所示:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
Run Code Online (Sandbox Code Playgroud)
但是,因为我已将它合并到Redux应用程序中,所以我不得不稍微调整一下PrivateRoute,以便我可以访问redux存储以及路径Props:
const PrivateRouteComponent = (props) => (
<Route {...props.routeProps} render={() => (
props.logged_in ? (
<div>{props.children}</div>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} /> )
)} />
);
const mapStateToProps = (state, ownProps) => …
Run Code Online (Sandbox Code Playgroud)