redux如何使用react-router重定向componentWillMount

Question

如何使用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

Answer 1

試試this.props.history ：

const { history } = this.props
history.pushState(null, '/login') or
history.replaceState(null, '/login')

如果您的模塊不是路由器的直接后代，您仍然可以通過將組件包裝在withRouter(YourComponent) HOC（在v4中）來訪問此prop。

Answer 2

我正在做的是使用路線的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'));