React-router v6 私有路由运行不正常

Question

我想用react-router V6 实现私有和public 路由，我已经尝试了Whosebug 上所有可用的解决方案，它似乎不起作用。这就是我需要澄清的原因。

// 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" 路径只是常规的不受保护的路由，所以我希望用户（任何用户）能够不受限制地访问该路由。

您可以做的是创建一种 PrivateRoute 的“逆”来检查身份验证状态并退回 是的用户 已通过身份验证。像这样的路线通常被称为“匿名”路线。

示例：

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>

React-router v6 私有路由运行不正常

React-router v6 private route not working well

reactjs

react-router

react-router-dom