React Router v6 404 / 带基本名称的通配符路由

Question

我正在尝试使用 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 文档中找不到任何有助于解决此问题的内容。

Answer 1

我想用

<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" }
);