React-router v6 专用路由运行不正常

Question

我想用反应路由器V6实现私有和公共路由，我已经尝试了StackOverflow上所有可用的解决方案，它似乎不起作用。这就是为什么我需要澄清。

// App.tsx 
<Suspense
          fallback={
            <Flex height={"90vh"} justifyContent="center" alignItems={"center"}>
              <Spinner colorScheme={"primary.400"} />
            </Flex>
          }
        >
          <Routes>
            <Route path="/" element={<Home />} />
            <Route
              path="/dashboard"
              element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              }
            />
            <Route
              path="/product/:id"
              element={
                <PrivateRoute>
                  <ProductDetails />
                </PrivateRoute>
              }
            />
            <Route path="/login" element={<Login />} />
            <Route
              path="/upload"
              element={
                <PrivateRoute>
                  <Upload />
                </PrivateRoute>
              }
            />
          </Routes>
        </Suspense>


// PrivateRoute.tsx
    export const PrivateRoute = ({ children }: any) => {
      const user = localStorage.getItem("user");
    
      if (user) {
        console.log("Yes, user exist");
      } else {
        console.log("No user");
      }
    
      if (!user) {
        return <Navigate to="/login" />;
      }
    
      return children;
    };

当我登录时，我仍然可以手动导航到登录页面，它会呈现，而不是将我推送到仪表板页面。为什么？？

Answer 1

您的"/login"路径只是常规的不受保护的路由，因此我希望用户（任何用户）能够不受限制地访问该路由。

您可以做的是创建一种您的Private ateRoute的“逆”，它检查身份验证状态并弹回经过身份验证的用户。像这样的路由通常称为“匿名”路由。

示例：

export const AnonymousRoute = ({ children }: any) => {
  const user = localStorage.getItem("user");

  if (user) {
    console.log("Yes, user exist");
  } else {
    console.log("No user");
  }

  if (user) {
    return <Navigate to="/dashboard" />;
  }

  return children;
};

用法：

<Suspense
  fallback={
    <Flex height={"90vh"} justifyContent="center" alignItems={"center"}>
      <Spinner colorScheme={"primary.400"} />
    </Flex>
  }
>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route
      path="/dashboard"
      element={
        <PrivateRoute>
          <Dashboard />
        </PrivateRoute>
      }
    />
    <Route
      path="/product/:id"
      element={
        <PrivateRoute>
          <ProductDetails />
        </PrivateRoute>
      }
    />
    <Route
      path="/login"
      element={
        <AnonymousRoute>
          <Login />
        </AnonymousRoute>
      }
    />
    <Route
      path="/upload"
      element={
        <PrivateRoute>
          <Upload />
        </PrivateRoute>
      }
    />
  </Routes>
</Suspense>