在 Vercel 上部署 React 应用程序时，嵌套路由器不起作用

Question

我在通过 Vercel 部署 React 应用程序时遇到了 React-router 问题。即使它在本地工作正常，它也无法导航到嵌套路由

//App.jsx
<BrowserRouter>
      <Header></Header>
      <Routes>
        <Route path='' element={<Home />}></Route>
        <Route path='product/:slug' element={<Product />}></Route>
        <Route path="issue/:slug" element={<Issue />}></Route>
        <Route path="category/:slug" element={<Category />}></Route>
        <Route path="login" element={<LoginAdmin />}></Route>
        <Route path="dashboard" element={<PrivateRoute />}>
          <Route path="product">
            <Route index element={<Navigate to="list" />}></Route>
            <Route path="create" element={<CreateProduct apiLink={apiLink} />}></Route>
            <Route path="list" element={<ListProduct />}></Route>
            <Route path="edit/:ID" element={<EditProduct apiLink={apiLink} />}></Route>
          </Route>
          <Route path="category">
            <Route index element={<Navigate to="list" />}></Route>
            <Route path="list" element={<ListCategory />}></Route>
            <Route path="create" element={<CreateSubCategory apiLink={apiLink} />}></Route>
            <Route path="edit/:ID" element={<EditCategory apiLink={apiLink} />}></Route>
          </Route>
          <Route path="issue">
            <Route index element={<Navigate to="list" />}></Route>
            <Route path="create" element={<CreateIssue apiLink={apiLink} />}></Route>
            <Route path="list" element={<ListIssue />}></Route>
            <Route path="edit/:ID" element={<EditIssue apiLink={apiLink} />}></Route>
          </Route>
        </Route>
        <Route path="*" element={<NotFoundPage />}></Route>
      </Routes>
      <Footer></Footer>
      <ContactSocial></ContactSocial>
    </BrowserRouter>

我还添加了 vercel.json 文件，但我仍然无法访问这些路由

vercel.json
{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/"
        }
    ]
}

我希望在 Vercel 上部署这些路由后能够访问这些路由。

Answer 1

嵌套路由也有类似的问题。一切都在本地运行，并且我有相同的 vercel JSON。所有路线都应作为父路线进行渲染。 /places 路线有效。但所有嵌套路由都不是。

这一切都可以在本地开发中运行。

路线示例：

<ThemeProvider theme={customTheme}>
  <Box style={styleLayout} className="sff">
    <ConfirmProvider>
      <Suspense fallback={<Spinner />}>
        <Routes>
          <Route path="/places/:id/:place" element={<Map />} /> // THIS ROUTE WORKS (CAUSES A DIALOG TO DISPLAY)
          <Route path="/" element={<Map />}> // NO ROUTES BELOW THIS RENDER
            <Route path="signin" element={<Signin />} />
            <Route path="events/:eventID/:eventTitle" element={<EventDetails />} />
            <Route path="events" element={<Events />} />
            <Route path="pages/:pageSlug" element={<Pages />} />
            <Route path="pages" element={<Pages />} />
            <Route path="admin" element={<AdminLayout />}>
              <Route index element={<Dashboard />} />
              <Route path=':type/' element={<ListContent />} />
              <Route path='locations/add' element={<AdminLocations />} />
              <Route path='locations/update/:updateId' element={<AdminLocations />} />
              <Route path='events/add' element={<AdminEvents />} />
              <Route path='events/update/:updateId' element={<AdminEvents />} />
              <Route path='pages/add' element={<AdminPages />} />
              <Route path='pages/update/:updateId' element={<AdminPages />} />
              <Route path='settings/' element={<AdminSettings />} />
            </Route>
            <Route path="*" element={<Navigate to="/" replace />} />
          </Route>
        </Routes>
      </Suspense>
    </ConfirmProvider>
  </Box>
  <Analytics />
</ThemeProvider>