在返回promise（axios）后，如何重定向到react redux中的组件。我正在使用路由器4

Question

我想创建一个身份验证系统。我在提交时制作了一个表单，使用ajax响应发送用户凭据并接收令牌作为回报。现在我想在收到令牌后重定向到主页。

我使用的是react router 4，redux thunk中间件，我曾尝试在上下文中执行此操作，但没有成功。

onSubmit(e){

  e.preventDefault();

  this.setState({isLoading:true});

  this.props.login(this.state).then(function(response){

    console.log('token', response.data.token);

    //Redirect to home component

  });

}

Answer 1

只是对约翰尼上面所说的进行了扩展。这是react router文档中的一个很好的例子：

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  }

  login = () => {
    fakeAuth.authenticate(() => {
    this.setState({ redirectToReferrer: true })
   })
  }

render() {
  const { from } = this.props.location.state || { from: { pathname: '/' } }
  const { redirectToReferrer } = this.state

  if (redirectToReferrer) {
    return (
      <Redirect to={from}/>
    )
  }

 return (
  <div>
    <p>You must log in to view the page at {from.pathname}</p>
    <button onClick={this.login}>Log in</button>
  </div>
  )
 }
}

所以你会：

//Redirect to home component

setState({loggedIn:true)}

在渲染函数中：

if (this.state.loggedIn) {
  return (<Redirect to='/home')
}

Answer 2

为此，您可以使用重定向组件：https://reacttraining.com/react-router/web/api/Redirect

您可以有一个状态变量来指示用户是否已登录，并在用户登录后在then方法中将其设置为true。在render方法中，使用该状态控制重定向组件的渲染。