react router v6 + vite + TS 中的受保护路由，当我获取特定页面 url 时，它会将我返回到 / [重复]

Question

我正在尝试在React Router dom vs 6中创建一条受保护的路由，但我有一些问题一一显示，比如刷新页面变为空白，然后修复页面后仅返回登录任何人都可以帮助我，

当我刷新特定页面时，我会回到基础页面，为什么？？

我使用一些新的 api（例如 createBrowserRouter）尝试了不同的解决方案，但总是发现不同的问题

import React from "react";
// import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "../pages/HomePage";
import Login from "../sign/Admin/Login";
import Signup from "../sign/Admin/Signup";
import { RootState } from "../../store";
import { useSelector } from "react-redux";
import CategoryPage from "../pages/CategoryPage";
import StorePage from "../pages/StorePage";
import ProductPage from "../pages/ProductPage";
import ServicePage from "../pages/ServicePage";
import UserPage from "../pages/UserPage";
import AdminPage from "../pages/AdminPage";
import OrderPage from "../pages/OrderPage";
import PrivateRoutes from "./PrivateRoutes";

const CustomeRoutes: React.FC = () => {
// const { isLoading, error, errorMessage } = useSelector((state: RootState) => state.admin);

return (
  <>
    <Router>
      <Routes>
        <Route element={<PrivateRoutes />}>
          <Route element={<HomePage />} path="/" />
          <Route path="/categories" element={<CategoryPage />} />
          <Route path="/stores" element={<StorePage />} />
          <Route path="/products" element={<ProductPage />} />
          <Route path="/services" element={<ServicePage />} />
          <Route path="/users" element={<UserPage />} />
          <Route path="/admins" element={<AdminPage />} />
          <Route path="/orders" element={<OrderPage />} />
        </Route>
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>
  </>
);
};

export default CustomeRoutes;

应用程序.tsx

import useLocalizeDocumentAttributes from "./i18n/useLocalizeDocumentAttributes";
import { AppDispatch, RootState } from "./store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { getAdminByToken } from "./store/slices/admin";
import CutomeRoutes from "./components/routes";

function App() {
  useLocalizeDocumentAttributes();
  const dispatch = useDispatch<AppDispatch>();
  // const { isLoading, error, errorMessage } = useSelector((state: RootState) => state.admin);

  useEffect(() => {
    const tokenFromStorage = localStorage.getItem("user-token");
    if (tokenFromStorage) {
      dispatch(getAdminByToken(tokenFromStorage));
    }
  }, [dispatch]);

  return (
    <>
      <CutomeRoutes />
    </>
  );
}

export default App;

const PrivateRoutes = () => {
  const { token, isLoading } = useSelector((state: RootState) => state.admin);
  console.log("PrivateRoutes=>", { token });
  React.useEffect(() => {}, [token]);
  //   if (isLoading) return <div>Loading...</div>;

  return !!token ? <Outlet /> : <Navigate to="/login" />;
};

处理登录

  const onSubmit: SubmitHandler<FormFields> = async (inputData, event) => {
    try {
      console.log(inputData);
      if (loginKey) {
        // If loginKey exists, dispatch acceptLoginKey action
        dispatch(acceptAdminLoginKey({ phone: inputData.phoneNumber, loginKey: parseInt(inputData.loginKey) }));
      } else {
        dispatch(loginAdmin(inputData.phoneNumber));
      }
    } catch (error) {
      console.log(error);
      setError("root", {
        message: "There's something wrong " + error,
      });
    }
  };
  useEffect(() => {
  
    if (token) {
      const { from } = location.state || { from: { pathname: "/" } };
      navigate(from, { replace: true });
    }
  }, [token]);

Answer 1

您可以创建一个名为 PrivateRoutes 的新组件来解决此问题，并将所有路由包装在单个组件中。

import { Navigate, Outlet } from 'react-router-dom'

const PrivateRoutes = () => {
  let auth = {'token':true}
return (
    auth.token ? <Outlet/> : <Navigate to='/login'/>
  )
}

然后你可以像这样重写应用程序代码：

<Router>
   <Routes>
      <PrivateRoutes>
         <Route path="/protected" element={...} />
      </PrivateRoutes>
   </Routes>
</Router>

供以后参考：https://medium.com/@dennisivy/creating-protected-routes-with-react-router-v6-2c4bbaf7bc1c