[v6] useParams() should return all params in the same <Routes>

[mjackson]

What is the new or updated feature that you are suggesting?

Currently (6.0.0-beta.1) useParams returns only the params that were part of that route's path. So e.g. in the following example, Root will never be able to access the userId param.

<Routes>
  <Route path="/" element={<Root />}>
    <Route path="/" element={<Home />} />
    <Route path="/users/:userId" element={<User />} />
  </Route>
</Routes>

function Root() {
  // No params here ... :'(
  let params = useParams(); // {}
}

function User() {
  let params = useParams(); // { userId: "..." }
}

However, this could be really useful for showing e.g. a login button or similar in the root route on a page.

Note: If User renders another nested <Routes>, it won't be possible for Root to get those params too because Root has already rendered before those <Routes> do. So useParams only knows about all params within a single <Routes>.

Implementation notes

Should be a fairly straightforward change. In useRoutes_ just collect all the params from all matches ahead of rendering instead of accumulating them in the reduceRight.

Why should this feature be included?

It will make it possible to know child params in parent routes. And that's awesome.

[mjackson]

Fixed in #7963

[Rafael-Dabrowski]

Is there a particular reason for only using the same Routes object? As v6 is promoting nested Routes Objects shouldn't it be possible to have this behaviour for all nested Routes as well?
Eg:

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

function Root() {
  // No params here ... :'(
  let params = useParams(); // {}
  return (
    <Routes>
      <Route element={<Home />} />
      <Route path="/users/:userId" element={<User />} />
    </Routes>
  );
}

function User() {
  let params = useParams(); // { userId: "..." }
}

My Usecase for this is to be able to redirect to the first item in a collection if there is one available otherwise display a page where the user can add a new item to the collection. Or just to check if there is currently an item selected.