![](/img/trans.png)
[英]React redux how to redirect to specific page using react-router
[英]redux how to redirect on componentWillMount using react-router
如何使用react-router重定向componentWillMount
export class NewStock extends React.Component {
constructor(props, context) {
super(props, context);
}
componentWillMount() {
const { session, dispatch, router } = this.props
if (session.userSessionData.get('logged_in') == false) {
router.transitionTo('/login')
}
};
这段代码:
router.transitionTo('/login')
只返回:
Uncaught TypeError: router.transitionTo is not a function
试试this.props.history
:
const { history } = this.props
history.pushState(null, '/login') or
history.replaceState(null, '/login')
如果您的模块不是路由器的直接后代,您仍然可以通过将组件包装在withRouter(YourComponent)
HOC(在v4中)来访问此prop。
我正在做的是使用路线的onEnter
道具。 这使我可以更好地集中我的身份验证。 我从react-router示例中获得灵感
我来到这里是因为我和你一样笨手笨脚,但很快陷入了无法管理的巨大代码。
希望所有人来到这里,你会从我的错误中吸取教训。
function requireAuth(nextState, replace) {
if (!UserStore.userIsSignedIn()) {
replace({
pathname: '/login',
state: {nextPathname: nextState.location.pathname}
})
}
}
render((
<Router history={hashHistory}>
<Route path="/" component={PageHeader}>
<IndexRoute component={AssignmentOverview} onEnter={requireAuth}/>
<Route path="login" component={UserLoginForm}/>
<Route path="logout" component={UserLogout}/>
<Route path="profile" component={UserProfile} onEnter={requireAuth}/>
<Route path="assignmentform" component={AssignmentForm} onEnter={requireAuth}/>
</Route>
</Router>
), document.getElementById('content'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.