javascript - Navigate through child routes using react-router-dom V6 - Stack Overflow

admin管理员组

文章数量:1022949

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow:

export default function App() {
  return (

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


  )
}

As see above the second Route's element is <AdminApp /> this element is ing from the following:

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 /> }
  ]);
}

So whenever i call the route /admin nothing display in the screen and in the console log I am getting this warning

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/*">

I have changed <Route path="admin" element={<AdminApp />} /> to <Route path="admin/*" element={<AdminApp />} /> so the warning disappeared but the page displays blank when i navigate to the route admin/ and it replace admin word with dashboard in the url:

what happened:

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

what expected:

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

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow:

export default function App() {
  return (

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


  )
}

As see above the second Route's element is <AdminApp /> this element is ing from the following:

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 /> }
  ]);
}

So whenever i call the route /admin nothing display in the screen and in the console log I am getting this warning

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/*">

I have changed <Route path="admin" element={<AdminApp />} /> to <Route path="admin/*" element={<AdminApp />} /> so the warning disappeared but the page displays blank when i navigate to the route admin/ and it replace admin word with dashboard in the url:

what happened:

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

what expected:

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

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow asked Jul 23, 2021 at 16:35 anieanie 54911 gold badge88 silver badges2222 bronze badges 4

• any solution to this problem? I am having the same issue but can't find any answers to it – Syed Faraz Khalid Commented Dec 25, 2021 at 15:10
• any update? any solution to this problem? – Rohit Nishad Commented Jan 13, 2022 at 18:31
• I don't know if its the right way to do, but I use path: '*' instead of path: '/' on the first child – dhidy Commented Jan 19, 2022 at 3:23
• @RohitNishad i solved this issue by replacing the first child route with '/' to empty quotes '/' => '' and it worked for me, i have added answer below – anie Commented Jan 19, 2022 at 7:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I have replaced '/' in first child route to '' and it worked for me. something like this :

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

Here is simple app working example

Try to use it this way:

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

You can place the routes under a child route that will encapsulate everything under that route. Then have the home "/" route return "admin" in the below example it will be "/" and then redirect to /admin then /signup is a standalone route. The wildcard route "*" should be reserved for 404 errors, where routes do not exist. In the future at the "/" route you would have your login check etc...

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 />
      </>
    )
}

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow:

export default function App() {
  return (

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


  )
}

As see above the second Route's element is <AdminApp /> this element is ing from the following:

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 /> }
  ]);
}

So whenever i call the route /admin nothing display in the screen and in the console log I am getting this warning

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/*">

I have changed <Route path="admin" element={<AdminApp />} /> to <Route path="admin/*" element={<AdminApp />} /> so the warning disappeared but the page displays blank when i navigate to the route admin/ and it replace admin word with dashboard in the url:

what happened:

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

what expected:

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

I am using react-router-dom V6 both Routes and useRoute, So, in the site, the main routes are as follow:

export default function App() {
  return (

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


  )
}

As see above the second Route's element is <AdminApp /> this element is ing from the following:

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 /> }
  ]);
}

So whenever i call the route /admin nothing display in the screen and in the console log I am getting this warning

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/*">

I have changed <Route path="admin" element={<AdminApp />} /> to <Route path="admin/*" element={<AdminApp />} /> so the warning disappeared but the page displays blank when i navigate to the route admin/ and it replace admin word with dashboard in the url:

what happened:

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

what expected:

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

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow asked Jul 23, 2021 at 16:35 anieanie 54911 gold badge88 silver badges2222 bronze badges 4

• any solution to this problem? I am having the same issue but can't find any answers to it – Syed Faraz Khalid Commented Dec 25, 2021 at 15:10
• any update? any solution to this problem? – Rohit Nishad Commented Jan 13, 2022 at 18:31
• I don't know if its the right way to do, but I use path: '*' instead of path: '/' on the first child – dhidy Commented Jan 19, 2022 at 3:23
• @RohitNishad i solved this issue by replacing the first child route with '/' to empty quotes '/' => '' and it worked for me, i have added answer below – anie Commented Jan 19, 2022 at 7:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I have replaced '/' in first child route to '' and it worked for me. something like this :

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

Here is simple app working example

Try to use it this way:

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

You can place the routes under a child route that will encapsulate everything under that route. Then have the home "/" route return "admin" in the below example it will be "/" and then redirect to /admin then /signup is a standalone route. The wildcard route "*" should be reserved for 404 errors, where routes do not exist. In the future at the "/" route you would have your login check etc...

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 />
      </>
    )
}

本文标签： javascriptNavigate through child routes using reactrouterdom V6Stack Overflow