在返回诺言(Axios)后，如何将React Redux中的组件重定向.我正在使用React路由器4

Question

我想创建身份验证系统。我在提交的表格上发送了我发送用户凭据并使用AJAX响应接收令牌。现在，我想在收到令牌后重定向到主页。

我正在使用React路由器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

您可以使用重定向组件：https：//reacttraining.com/react-router/web/api/redirect

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

Answer 2

只是对约翰尼所说的话扩展。这是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')
}