How to render multiple component which parent are wrapped into another multiple element in react router v6

Question

I am creating a Project where I have multiple component in /. So I wrapped them into a Route with Fragment. Now from those child component one is parent of another some component.

How can I set them to Route?

Infomation

1. Browser Router are in it's parent component.
2. I can see all 4 Dashboard, Hero, List, Footer in Homepage.
3. I am getting nothing after List
4. The router will be like /li/:liId/:olId means /li/1/1. I can view only /

Code

<Routes>
     <Route path='/' element={
        <>
          <Dashboard />
          <Hero />
          <List>
             <Route path="/li" element={<Hi />}>
                <Route path="/:liId" element={<Hi />} >
                    <Route path="/:olId" element={<Hi />} />
                    <Route path="/i" element={<Info />} />
                    <Route path='/d' element={<Details />} />
                 </Route>
              </Route>
              <Route path='*' element={<Error />} />
           </List>
           <Footer />
        </>
       }>
      </Route>
 </Routes>

Solved with

<Routes>
  <Route
    path='/*'
    element={(
      <>
        <Dashboard />
        <Hero />
        <List>
          <Outlet />
        </List>
        <Footer />
      </>
    )}
  >
    <Route path="/li/:liId" element={<Hi />}>
      <Route path="/li/:liId/:olId" element={<Hi />}/>
        <Route path="/li/:liId/i" element={<Info />} />
        <Route path="*" element={<Error />} />
    </Route>
  </Route>
</Routes>

Answer 1

The Route components that are rendering nested routes should specify the trailing "/*" wildcard character to allow sub-route path matching.

Route components should also only have either the Routes or another Route component as parent.

You can either wrap the nested routes in a Routes component:

<Routes>
  <Route
    path='/*'
    element={(
      <>
        <Dashboard />
        <Hero />
        <List>
          <Routes>
            <Route path="li" element={<Hi />}>
              <Route path=":liId" element={<Hi />}>
                <Route path=":olId" element={<Hi />} />
                <Route path="i" element={<Info />} />
                <Route path="d" element={<Details />} />
              </Route>
            </Route>
            <Route path='*' element={<Error />} />
          </Routes>
        </List>
        <Footer />
      </>
    )}
  />
</Routes>

Or render an Outlet for the nested Route components to be rendered into.

<Routes>
  <Route
    path='/'
    element={(
      <>
        <Dashboard />
        <Hero />
        <List>
          <Outlet /> // <-- nested `Route`s render out here
        </List>
        <Footer />
      </>
    )}
  >
    <Route path="li" element={<Hi />}>
      <Route path=":liId" element={<Hi />}>
        <Route path=":olId" element={<Hi />} />
        <Route path="i" element={<Info />} />
        <Route path="d" element={<Details />} />
      </Route>
    </Route>
    <Route path='*' element={<Error />} />
  </Route>
</Routes>