重定向在反應中無法正常工作

Question

我想要的是：

我有一條專用路由（/ dashboard），僅當用戶登錄時才可以訪問。因此，我的條件是僅當用戶經過身份驗證且加載為false（已完成）時才加載Dashboard。 如果用戶未通過身份驗證，則將其重定向到登錄頁面。

問題

如果我從導航欄中單擊“儀表板鏈接”，則我的代碼工作正常。 如果我登錄，它將重定向到儀表板，但是當我嘗試通過直接鍵入localhost：3000 / dashboard手動進入儀表板時，問題就出現了。 即使刷新儀表板，它也會將我重定向到登錄頁面。

原因

因此，導致此問題的原因是兩個狀態（身份驗證和加載）都位於Redux中，因此，如果我直接訪問儀表板，則Redux需要花費一些時間來登錄用戶並更改狀態，因此即使我返回首頁如果我已登錄。

我需要花費一些時間，因為我在本地存儲中有一個令牌，並且通過向后端發送發布請求以確認令牌是否有效來對其進行檢查，在有效令牌上，我使用戶進入還原狀態。

碼

在App.js中

<Switch>
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/dashboard" component={
</Switch>

PrivateRoute.js

const PrivateRoute = props => {
  let route = <Route {...props} component={props.component} />;

  if (!props.isLoading && !props.isAuthenticated) {
    route = <Redirect to="/login" />;
  }
  return <React.Fragment>{route}</React.Fragment>;
}

您會看到在“專用路由”中立即檢查了該條件，由於該用戶手動進入/ dashboard會被重定向到主頁。

我該如何解決這個問題？

解決的問題：由於isLoading始終未定義，因此我有一點錯字。 通過修復它，它工作正常

Answer 1

您可以通過將Web服務器重定向到React SPA的登錄頁面來解決此問題。 它可以是/login/但通常是/ 。 此時頁面被重新加載，React應用程序開始重新執行，React代碼確定（檢查是否存在cookie，而不查看剛創建的Redux存儲）用戶未登錄並在內部重定向從“ /”到“ / login /”。

Web服務器不會意識到此內部重定向，它在SPA內部。 但是，如果用戶在導航欄上鍵入URL並按Enter（我知道是問題），則Web服務器將知道。

如果使用webpack-dev-server，則可以通過將historyApiFallback設置為true並指定重定向URL來實現SPA所需的重定向類型。