CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
anie
anie

Reputation: 519

Navigate through child routes using react-router-dom V6

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 coming 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

Upvotes: 4

Views: 8173

Answers (3)

George Reyes
George Reyes

Reputation: 41

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

Upvotes: 0

anie
anie

Reputation: 519

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

Upvotes: 1

Lucas Daniel
Lucas Daniel

Reputation: 31

Try to use it this way:

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

Upvotes: 0

Related Questions