我想用react-router 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;
};
当我登录时,我仍然可以手动导航到登录页面并进行渲染,而不是将我推送到仪表板页面。为什么??
Your "/login"
路径只是常规的不受保护的路线,所以我希望用户(any user)能够不受限制地访问该路线。
你能做的就是创建一种你的“逆”PrivateRoute
检查身份验证状态并退回用户are已验证。此类路由通常称为“匿名”路由。
Example:
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;
};
Usage:
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)