react-router-dom 相关问题

我正在尝试使用 React Router v6 实现一个应用程序路由器，其基本名称为 /foo：导出常量 appRouter = createBrowserRouter( 从元素创建路由（我正在尝试使用 React Router v6 实现一个应用程序路由器，它有一个基本名称/foo： export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route path="/createEvent" element={<CreateEvent />} /> <Route index element={<Dashboard />} exact /> <Route path="/admin-console" element={<UserAdminDashboard />} exact /> <Route path="/view-previous" element={<ViewPastEvent />} exact /> </Route> </Route> ), { basename: "/foo", } ); 我想用捕获 404，以便像 localhost:5000/bar 这样的路径会重定向到 localhost:5000/foo，但我的所有路由都作为 /foo 的子级存在，所以我不确定如何实现 404捕获 localhost:5000/foo/this-route-is-a-404 以及 localhost:3000/bar/bar-is-not-the-basename-of-this-app。我尝试添加 <Route path="*" element={<Navigate to="/foo"/>}/> 作为 <Route element={<Layout />}> 的同级元素，但 createRoutesFromElements() 只需要一个根元素。如有任何帮助，我们将不胜感激。我在 React Router 文档中找不到任何有助于解决此问题的内容。我想用 <Route path="*" element={}/> 捕获 404，所以像 "localhost:5000/bar" 这样的路径会重定向到 "localhost:5000/foo"，但我所有的路线都作为 "/foo" 当应用程序从 "/foo" 目录托管时，应用程序和路由器将相对于该路径运行。服务器需要将页面请求从 "/" 重定向到 "/foo"，以将其“引导”到您的应用程序中。您如何处理此问题取决于您的服务器环境或托管服务。当您运行 localhost 时，您通常只需在启动应用程序后手动导航，因为应用程序是从 root 运行的 "/"。我尝试添加 <Route path="*" element={<Navigate to="/foo" />} /> 作为 <Route element={<Layout />}> 的兄弟姐妹，但是 createRoutesFromElements() 只需要一个根元素。您可以在 React.Fragment 组件中渲染同级路由。 export const appRouter = createBrowserRouter( createRoutesFromElements( <> <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> // <-- "/" <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> </Route> <Route path="*" element={<Navigate to="/" replace />} /> // <-- redirect to "/" home path </> ), { basename: "/foo" } ); 但是由于重定向到 "/" 不会在视觉上呈现任何内容，因此没有理由将其呈现在 Layout 布局路线之外。在布局路线中渲染重定向应该同样有效。 export const appRouter = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/login" element={<Login />} /> <Route path="/requestAccess" element={<RequestAccess />} /> <Route element={<PrivateRoutes />}> <Route index element={<Dashboard />} /> <Route path="createEvent" element={<CreateEvent />} /> <Route path="admin-console" element={<UserAdminDashboard />} /> <Route path="view-previous" element={<ViewPastEvent />} /> </Route> <Route path="*" element={<Navigate to="/" replace />} /> </Route> ), { basename: "/foo" } );

reactjs react-router navigation react-router-dom

回答 1 投票 0

React Router v6 认证路由

我知道这个问题已经被洗过多次了。然而，我无法从多个步骤中得到所有答案。我确实理解将经过身份验证的路由包装到授权中的主要概念...

reactjs react-router-dom

回答 1 投票 0

React 与链接相关的路由器错误

我正在尝试将组件从一个路由到另一个，我收到与反应路由器链接相关的错误，反应路由器的错误是 - 无法编译我尝试使用反应路由...

reactjs react-router react-router-dom

回答 4 投票 0

React router dom 不渲染我的页面（v6）

我正在开发一个 MERN 项目，我不确定为什么我的页面没有被渲染。我正在遵循教程，我们有确切的代码。这是我的 App.jsx 导入'./App.css' 导入 { 路线，Ro...