Nested routing is not working in React Router v6

Question

I am trying react router v6. As per react training blog, I have created object of routing and passed to useRoutes():

function SomeOtherElement() {
  return <h1>add user</h1>;
}

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <AccountView /> },
      {
        path: 'users', element: <UserListView />, 
        children: [
          { path: 'add', element: <SomeOtherElement /> }
        ]
      },
      { path: 'dashboard', element: <DashboardView /> },
      { path: 'products', element: <ProductListView /> },
      { path: 'settings', element: <SettingsView /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  }];

const routing = useRoutes(routes);

But the nested routing is not working. As you can see in above object, I want to create URL and render the UI for user "add" functionality.

URL in the browser is getting updated correctly to http://localhost:3000/app/users/add but UI is not updating.

anuragsinhame · Accepted Answer · 2022-03-08 09:47:28Z

67

The default behavior of React Router fails to render multiple child routes with single Outlet. For example - When there is requirement to have a single Header in all the pages and replace the common content (Single Outlet) based on Route.

The trick here is to not provide any element attribute for parent but to provide this component as a child route with the help of Index attribute.

Index helps us to have a default component for a parent route if the child routes doesn't match any of the child routes.

The code snippet for this would be similar to the one provided by Samira.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />}>
      <Route path="" element={<Home />}></Route>
      <Route path="child1"> //no element attribute here
        <Route index={true} element={<Child1 />}></Route>
        <Route path="grandChild1" element={<GrandChild1 />}></Route>
        <Route path="grandChild2" element={<GrandChild2 />}></Route>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

edited Mar 8, 2022 at 9:47

answered Jan 2, 2022 at 17:04

anuragsinhame

1,05910 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Roi Over a year ago

Would this be considered an exploit? And does this work to even deeper hierarchies?

anuragsinhame Over a year ago

I don't think it should be considered exploit. And about the hierarchies, I have personally not tried on deeper levels, but yes if we have got the concepts correct, then it should work.

Samuel Slade Over a year ago

The index={true} fixed my issue (for anyone else who might stumble here with the same issue as me)

JoeD Over a year ago

It would have been helpful to post what this looks like inside useRoutes([]) as objects in the array, and not markup. The question originally posed it like that. It is not difficult to translate but would speed it up for new people not understanding the difference between descendent and nested routes. (Tried to post it, but too ugly and unreadable in a comment)

Suraj Mandal Over a year ago

Thank you, this solves the issue. Was using nextjs, switched to base react for a project and now I remember that I seldom hated the router.

|

Ajeet Shah · Accepted Answer · 2020-10-10 10:59:26Z

As explained here, you need to use an <Outlet /> element as a placeholder for child i.e. nested routes.

Example:

import { Outlet } from 'react-router-dom'

// ... 

const routes = [
  {
    path: "app",
    element: (
      <>
        <DashboardLayout />
        <Outlet />
      </>
    ),
    children: [
      { path: "account", element: <AccountView /> },
      {
        path: "users",
        element: (
          <>
            <UserListView />
            <Outlet />
          </>
        ),
        children: [{ path: "add", element: <SomeOtherElement /> }],
      },
      { path: "dashboard", element: <DashboardView /> },
    ],
  },
];

Or you may want to have Outlet inside your parent components:

export default function DashboardLayout() {
  return (
    <>
      <h1>I am Dashboard Layout</h1>
      <Outlet />
    </>
  );
}

Samira · Accepted Answer · 2022-02-23 08:51:38Z

13

It is a helpful example for me because I wanted to use nested Route but I didn't want to use Outlet so I found it :

pay attention you can make a dynamic route with path=":teamId"

<BrowserRouter>
        <Routes>
          <Route path="/">
            <Route index={true} element={<Home />} />
          </Route>
          <Route path="/teams">
            <Route index={true} element={<ParentTeam />} />
            <Route index={false} path=":teamId" element={<Team />} />
            <Route index={false} path="new" element={<NewTeamForm />} />
          </Route>
          <Route path="*" element={<Home />} />
        </Routes>
   </BrowserRouter>

link to codeSandBox

edited Feb 23, 2022 at 8:51

answered Dec 28, 2021 at 9:14

Samira

2,8031 gold badge18 silver badges30 bronze badges

6 Comments

Júlio Gori Corradi Over a year ago

What actually the index prop does?

Samira Over a year ago

the index determines the main page in a specific route

Samira Over a year ago

so the path of ParentTeam is "/teams"

Marka A Over a year ago

Thanks @Samira. Saved me man.... No need to explicitly put index except if it IS the index. Again thanks....

Samira Over a year ago

You're welcome @MarkaA. I put the index in each route to have a better understanding.

|

Florian · Accepted Answer · 2022-08-02 13:32:59Z

5

For the useRoutes hook the syntax looks like this:

const items = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/logout",
    element: <Logout />,
  },
  {
    path: "/",
    element:  <RequireAuth element={<Welcome />} />,
  },
  {
    path: "/inbox",
    element:  <RequireAuth element={<Inbox />} />
  },
  {
    path: "/dashboard",
    children: [
      {
        index: true,
        element:  <RequireAuth element={<Dashboard />} />
      },
      {
        path: "setup",
        element:  <RequireAuth element={<DashboardSetup/>} />
      },
    ]
  },


]

export default function MainContent() {
  const router = useRoutes(items);
  return router

}

answered Aug 2, 2022 at 13:32

Florian

7737 silver badges28 bronze badges

1 Comment

Dave Munger Over a year ago

This doesn't work for me. The index entry resolves fine, but the next child causes the page not to render and, in my case, throws the error: 'GET localhost:3000/characters/main.js net::ERR_ABORTED 404 (Not Found)' when trying to load 'localhost:3000/characters/new'

Olga Dolinger · Accepted Answer · 2024-02-26 18:15:21Z

0

When setting path in childerns array you should allow using api history in dev server config:

  devServer: {
    historyApiFallback: true,
  }

here is a link to docs: https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback

and here is tutorial

https://youtu.be/acAH2_YT6bs?list=PL6DxKON1uLOHyPVa0XhcqcW2RhDytDpAI&t=4891

edited Feb 26, 2024 at 18:15

answered Feb 26, 2024 at 18:09

Olga Dolinger

11 bronze badge

Collectives™ on Stack Overflow

Nested routing is not working in React Router v6

5 Answers 5

6 Comments

Comments

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related