登录后reactjs重定向

Question

我正在Reactjs中创建一个应用程序。我有app.js，dashboard.js和login.js。

在我的app.js我有一个链接到登录页面。我想从登录页面登录仪表板页面。在我的登录中，我正在调用后端服务并验证用户credentails。我在login.js

request.post(
     options, 
     function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
       console.log('redirecting'); 

       // browserHistory.push('/dashboard') 
       // (<Redirect to={{ 
       // pathname: '/dashboard' 
       // }}/>) 
       // this.props.history.push('/dashboard'); 

       <Redirect to='./dashboard' /> // redirection is not working here 

      }else{ 
       console.log(error); 
      } 
     } 
    ); 

当我输入用户凭据下面的代码，验证后，我可以看到控制台重定向消息，不过页面没有进行重定向。我正在使用react-router-dom。你能帮我找出哪里出了问题吗？

Answer 1

您试图将jsx代码放入函数中。 jsx代码工作里面的渲染功能和点击<Redirect to='./dashboard' />将重定向到仪表板页面。但是你正尝试以编程方式重定向。使用browserHistory.push('/dashboard')从功能重定向。

这是一个参考Navigating Outside of Components

Answer 2

我相信你可以只使用<Redirect>作为渲染元素从您的组件之一（不是从一个JS函数内）。

因此，从您的login页面您可以调用此函数如何在服务器响应之后设置变量以指示用户是否成功登录，然后根据其值显示<Redirect>。

例如，

request.post(
    options, 
    function (error, response, body) { 
     if (!error && response.statusCode === 200) { 
      console.log('redirecting'); 

      this.setState({ 
       isLoggedIn: true 
      }) 

     }else{ 
      console.log(error); 
     } 
    } 
); 

，并在您render方法：

if (this.state.isLoggedIn) { 
    return <Redirect to='./dashboard' /> 
} 
return (
    // If the user is not logged in, return the usual login page... 
)