如何使用帶有條件和 Redux 的 React Routes？

Question

我正在努力使用 React Redux 和 Routes 創建身份驗證。

根據負責身份驗證的變量，用戶獲得一組特定的路由。 但是在初始加載時，當變量還沒有從 redux store 收到值時，會為未登錄的用戶顯示路由，即注冊頁面，然后才顯示必要的頁面。

原來每次更新注冊頁面都會閃一下。

route.js 中的代碼：

export const RotesPage = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return (
      <div>
        <Switch>
          <Route path="/" exact>
            <MainPage />
          </Route>
          <Route path="/schedule" exact>
            <SchedulePage />
          </Route>
          <Route path="/tasks" exact>
            <TasksPage />
          </Route>
          <Route path="/money" exact>
            <MoneyPage />
          </Route>
          <Redirect to="/" />
        </Switch>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <Switch>
        <Route path="/login" exact>
          <LoginPage />
        </Route>
        <Route path="/register" exact>
          <RegisterPage />
        </Route>
        <Redirect to="/login" />
      </Switch>
    );
  }
};

App.js 中的代碼：

import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { loadUser } from "./actions/authAction"; 
import { AppNavbar } from "./layouts/components/AppNavbar";
import { RotesPage } from "./routes";

const App = () => {
  const dispatch = useDispatch(); 
  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;

  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);

  return (
    <Router>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </Router>
  );
};

export default App;

我該如何解決？

PS 對不起，如果我描述得不好，因為我不僅在學習編程語言，還在學習英語。

PPS 這是我在這里的第一個 Q。

提前謝謝你=）

Answer 1

在您的 redux 狀態中設置isLoading變量，該變量最初將為true ，一旦您獲得身份驗證數據，將其設置為false 。

然后在您的應用程序中，您可以執行以下操作：

  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;
  const isLoading = auth.isLoading;

<Router>
  {isLoading ? (
    <div>Loading...</div>
  ): (
    <>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </>
  )}
</Router>