react cognito和路由器v4：登录后将用户重定向到请求的PrivateRoute

Question

我是React Redux路由器的新手，在成功登录后如何将用户转发到所请求的PrivateRoute上，我一直在绞尽脑汁。

react cognito启动cognito\u LOGIN操作，并在成功登录时在存储中设置cognito.state=“LOGGED\u IN”。我知道react路由器将请求的路由存储在location.state.from.pathname中，我知道要重定向浏览器路由器，我可以使用history.replace（）。

我只是不知道我的代码去了哪里，所以它在react-cognito-onSubmit登录函数异步完成后执行，因为这个包没有提供回调。

在我的登录表单组件我尝试

componentWillReceiveProps(nextProps) {
    if (nextProps.cognito.state === 'LOGGED_IN') {
      // logged in, let's show redirect if any, or show home
      try {
        const { from } = this.props.location.state || {
          from: { pathname: "/" }
        };
        nextProps.history.replace(from);
      } catch (err) {
        nextProps.history.replace("/");
      }
    }
  }

……但执行得太早了。我不认为这样的东西应该放在减速机里，因为它们似乎只是为了直接操纵商店，但我可能离那里很远。

是否有一些功能在react-router-redux包，可能会提供一些有用的东西在这里？

我没有回调就卡住了吗？难道就没有办法守望cognito.state?

欢迎建议。

TIA

Answer 1

您可以在操作中使用推送方法来调度一个将您的应用重定向到所需位置/路线的操作。

action.js

import {push} from 'react-router-redux';

/*** write your API here and after success redirect your route ***/

.then(() => {
   dispatch(push(args.redirectRoute))
 })

确保已使用Redux配置React路由器。

Answer 2

使用react-router-v4的标准方法是渲染一个

就你而言：

render() {
    if (this.props.cognito.state === 'LOGGED_IN') {
        return (<Redirect to="/" />)
    }
    //...
}

默认情况下，这将替换当前位置。

有关更多信息，请参见此示例。