问题与2路由- React路由器v6

Question

我的路由有问题，我有一个路由器用于认证，

export const AuthRoute = () => {
return (
<Routes>
<Route path="signIn" element={<SignInPage />} />
<Route path="signUp" element={<SignUpPage />} />
<Route path='/*' element={<Navigate to="/auth/signIn" />} />
</Routes>
)
}

这些是我的仪表盘，

export const DashboardRoute = () => {
return (
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="history" element={<HistoryPage />} />
<Route path="contact" element={<ContactPage />} />
<Route path='/*' element={<Navigate to="/" />} />
</Routes>
)
}

如果用户没有经过身份验证，那么该特定用户只能访问登录页面，但是如果用户经过身份验证，那么他将有权访问仪表板中的所有页面。我的主路由器是

export const AppRouter = () => {
...
...
if (status === authStatusConst.CHECKING) {
return (
<h3>Loading...</h3>
)
}    
return (
<Routes>
{
(status === authStatusConst.UNAUTHENTICATED)
? (
<>
<Route path="/auth/*" element={ <SignInPage /> } />
<Route path="/*" element={ <Navigate to="/auth/signIn" /> } />
</>
)
: (
<>
<Route path="/" element={ <HomePage /> } />
<Route path="/*" element={ <Navigate to="/" /> } />
</>
)
}
</Routes>
)
}

问题是，如果我想访问历史页面或联系人页面，我不能这样做，只有我可以访问主页(我被认证)。谢谢大家的建议。

问候,

Answer 1

当你使用"/*"这意味着无论你在"/"后面写什么，比如"contact"，它总是会转到你定义的那个元素在这种情况下，它是主页组件。你可以试试下面的代码:

<Route path='*' element={<Navigate to="/" />} />

Answer 2

看来你基本上是在尝试实现路由保护。常见的模式是创建处理身份验证状态检查的布局路由，并相应地重定向或呈现Outlet。不要有条件地渲染路由，而是有条件地允许访问受保护的内容。

的例子:

import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoutes = () => {
...
if (status === authStatusConst.CHECKING) {
return <h3>Loading...</h3>;
}
return status === authStatusConst.UNAUTHENTICATED
? <Navigate to="/auth/signIn" replace />
: <Outlet />;
};
const AnonymousRoutes = () => {
...
if (status === authStatusConst.CHECKING) {
return <h3>Loading...</h3>;
}
return status === authStatusConst.UNAUTHENTICATED
? <Outlet />
: <Navigate to="/" replace />;
};

…

export const AppRouter = () => {
...

return (
<Routes>
<Route element={<AnonymousRoutes />}>
<Route path="signIn" element={<SignInPage />} />
<Route path="signUp" element={<SignUpPage />} />
</Route>
<Route element={<PrivateRoutes />}>
<Route path="/" element={<HomePage />} />
<Route path="history" element={<HistoryPage />} />
<Route path="contact" element={<ContactPage />} />
</Route>
<Route path="*" element={<Navigate to="/" replace /> } />
</Routes>
)
};

如果你不想在AppRouter中渲染所有路由和嵌套路由，而是想渲染渲染后代路由的组件(即。在后代Routes组件中呈现)，那么父路由需要将"*"通配符匹配器附加到它们的路径中，以便后代路由也可以匹配。

的例子:

export const AuthRoutes = () => {
return (
<Routes>
<Route path="/signIn" element={<SignInPage />} />
<Route path="/signUp" element={<SignUpPage />} />
<Route path='/*' element={<Navigate to="/auth/signIn" />} />
</Routes>
);
};
export const DashboardRoutes = () => {
return (
<Routes>
<Route index element={<HomePage />} />
<Route path="/history" element={<HistoryPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path='/*' element={<Navigate to="/" />} />
</Routes>
)
}

…

export const AppRouter = () => {
...

return (
<Routes>
<Route element={<AnonymousRoutes />}>
<Route path="/auth/*" element={<AuthRoutes />} />
</Route>
<Route element={<PrivateRoutes />}>
<Route path="/*" element={<DashboardRoutes />} />
</Route>
</Routes>
)
};