Redux重定向时传递值

Question

我使用React + Redux + React路由器为一个应用程序。我的初始页面是一个登录屏幕，一旦认证成功，想重定向到另一个页面，同时通过从认证检索令牌。我正在看这个SO问题，但不显示如何将值传递到新页面:React Router Redirect

我正在考虑采用Dan的建议，在操作创建者中坚持重定向(为了成功登录)，但不确定如何将令牌传递回来。这是我的动作创建器:

export const loginSucceeded = token => {
    browserHistory.push('/dashboard')
}

Answer 1

我建议使用react-router-redux。它带有push和replace动作，因此您可以在loginSucceeded动作创建器中dispatch它们。这是处理路由更改的一种更简洁的方式，您将在redux开发工具中看到适当的操作。将令牌存储在localStorage

中是个好主意

假设您使用redux-thunk中间件:

export const loginSucceeded = token => {
  return dispatch => {
    localStorage.setItem('token', token);
    dispatch(push('/dashboard'));
  };
};

Answer 2

对于react-router 4，你可以这样做:

import { Route, Redirect } from 'react-router-dom';
export const loginSucceeded = token => {
    <Redirect push to={{
        pathname: '/dashboard',
        state: { token: token }
    }}/>
}

以后这个令牌可以通过this.props.location.state.token从仪表板页面访问。

更多关于这里