嵌套路由在 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.

Answer 1

As explained here , you need to use an <Outlet /> element as a placeholder for child ie 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 />
    </>
  );
}

Answer 2

<BrowserRouter>
            <Routes>

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

Answer 3

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 attribute for parent but to provide this component as a child route with the help of 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>

Answer 4

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

}