我想用反应路由器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;
};
当我登录时，我仍然可以手动导航到登录页面，它会呈现，而不是将我推送到仪表板页面。为什么？？
您的"/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>
