登錄後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... 
)