Issues with children of react router 6 rendering-CodePudding

I seen other post but those solutions have not worked for me. I Have a basic one and yet...does not work

  <BrowserRouter>
    <Routes>
      <Route index element={<Main />} />
      <Route path='/main' element={<Main />} >
        <Route path="test" element={<Test />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  </BrowserRouter>

every page, /main, /main/test, /main/fake all renders Main

I have also tried removing this part

<Route index element={<Main />} />

and this part

<Route path="*" element={<NotFound />} />

with no luck

CodePudding user response：

Did you add the Outlet component inside of Main? This is how the React Router v6 works, if you go to /main/test path it will render the Main component and Test component in a place where you specify the Outlet component