使用 react-router-dom V6 浏览子路由答案

【问题标题】：Navigate through child routes using react-router-dom V6使用 react-router-dom V6 浏览子路由
【发布时间】：2021-07-23 16:35:01
【问题描述】：

我正在使用react-router-dom V6Routes和useRoute，所以，在网站中，主要路线如下：

export default function App() {
  return (

    <Routes>
      <Route path="/" element={<Components />} />
      <Route path="admin" element={<AdminApp />} />
    </Routes>


  )
}

如上所示，第二个 Route 的元素是 <AdminApp />，此元素来自以下内容：

export default function AdminApp() {
  return useRoutes([
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { path: '/', element: <Navigate to="/dashboard/app" replace /> },
        { path: 'app', element: <DashboardApp /> },
        { path: 'user', element: <User /> },
        { path: 'products', element: <Products /> },
        { path: 'blog', element: <Blog /> }
      ]
    },
    {
      path: '/',
      element: <LogoOnlyLayout />,
      children: [
        { path: 'login', element: <Login /> },
        { path: 'register', element: <Register /> },
        { path: '404', element: <NotFound /> },
        { path: '/', element: <Navigate to="/dashboard" /> },
        { path: '*', element: <Navigate to="/404" /> }
      ]
    },

    { path: '*', element: <Navigate to="/404" replace /> }
  ]);
}

因此，每当我调用路线 /admin 时，屏幕和 console log 中都不会显示任何内容，我会收到此警告

index.tsx:90 You rendered descendant <Routes> (or called `useRoutes`) at "/admin" (under <Route path="admin">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="admin"> to <Route path="admin/*">

我已将<Route path="admin" element={<AdminApp />} /> 更改为<Route path="admin/*" element={<AdminApp />} />，因此警告消失了，但当我导航到路线admin/ 时页面显示为空白，并将网址中的admin 单词替换为dashboard：

发生了什么：

http://localhost:3000/admin => http://localhost:3000/dashboard

预期结果：

http://localhost:3000/admin => http://localhost:3000/dashboard/app

【问题讨论】：

这个问题有什么解决办法吗？我有同样的问题，但找不到任何答案
有什么更新吗？这个问题有什么解决办法吗？
我不知道这样做是否正确，但我在第一个孩子上使用 path: '*' 而不是 path: '/'
@RohitNishad 我通过将第一个子路由替换为 '/' 以空引号 '/' => '' 解决了这个问题，它对我有用，我在下面添加了答案

标签： javascript reactjs react-router-dom

【解决方案1】：

我已将第一个子路由中的“/”替换为“”，它对我有用。像这样：

return useRoutes([
    {
      path: "dashboard",
      children: [
        { path: "", element: <Navigate to="dashboard/app" replace /> },
        { path: "app", element: <DashboardApp /> },
        { path: "user", element: <User /> }
      ]
    }
  ]);

Here 是一个简单的应用程序工作示例

【讨论】：

【解决方案2】：

您可以将路由放在子路由下，该子路由将封装该路由下的所有内容。然后在下面的示例中让主“/”路由返回“admin”，它将是“/”，然后重定向到 /admin，然后 /signup 是一个独立的路由。通配符路由“*”应为不存在路由的 404 错误保留。将来在“/”路线上，您将进行登录检查等...

export default function App() {
  return (
<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />}>
         <Route path="admin" element={<AdminApp />} />
      </Route>
      <Route path="/signup" element={<Components />}>
      <Route path="*" element={<Errors404 />}>
    </Routes>
</BrowserRouter>


  )
}

function Home() {
    return (
      <>
      <AdminApp />
      </>
    )
}

【讨论】：

【解决方案3】：

尝试以这种方式使用它：

{
  path: 'dashboard',
  element: <DashboardLayout />,
  children: [
    { path: '/dashboard', element: <Navigate to="/dashboard/app" replace /> },
    { path: 'app', element: <GeneralApp /> }
  ]
},

【讨论】：

请用英文写下你的答案。