React Router v6 nesting example

nested-routes.jsx

import { Route, Routes } from 'react-router-dom'

function AppRoutes() {
  return (
    <Routes>
      <Route index={true} element={<Home />} />
      <Route path="settings" element={<Settings />}>
        <Route path="people" element={<PeopleSettings />}>
          <Route path=":userId" element={<PersonSettings />} />
        </Route>
        <Route path="types" element={<TypesSettings />}>
          <Route path=":typeId" element={<TypeSettings />} />
        </Route>
        <Route path="security" element={<SecuritySettings />} />
      </Route>
      <Route path="items/:storageId" element={<Storage />}>
        <Route path=":itemId" element={<StorageItem />} />
      </Route>
    </Routes>
  )
}