Migration nested routes from v5 to v6

[costafacchini]

I am trying to migrate routes from v5 to v6 and am having difficulties with nested routes using params.
Routes
Main component

<Routes>
  <Route path="people/*" element={<PeopleComponent />}>
</Routes>

PeopleComponent

const params = useParams()

<Routes>
  <Route path="/" element={<IndexComponent />}/>
  <Route path=":personId" element={<ShowComponent />}>
    <Route path="edit" element={<EditComponent resource={params.personId} />}/>
    <Route path="destroy" element={<DestroyComponent resource={params.personId} />}/>
  </Route>
</Routes>

When I try to access the edit or destroy route, params.personId always is undefined.
Does anyone know what I'm doing wrong?

[MeiKatz]

useParams() is relative to the most inner route context it was called. In your case it is above the definition of :personId and therefore it is not defined. You could something like this:

function PersonComponent() {
  const params = useParams();

  return (
    <Routes>
      <Route path="" element={<ShowComponent />} />
      <Route path="edit" element={<EditComponent resource={params.personId} />} />
      <Route path="destroy" element={<DestroyComponent resource={params.personId} />} />
    </Routes>
  );
}

<Routes>
  <Route path="/" element={<IndexComponent />} />
  <Route path=":personId" element={<PersonComponent />} />
</Routes>