[v6] useParams in parent route does not contain child route params

[andrelandgraf]

I noticed some unexpected behaviour of useParams. I also reported a very similar issue for useSearchParams but this time, I am more certain it's actually an bug and not just an edge case.

I try to manage layouts in higher-order routes and make use of <Outlet /> to reuse the same layout within all sub-routes. I try to use useSearchParams and useParams in the parent route to be context aware, e.g. show a different nav-menu based on which route/URL is actually rendered right now.

Version

v6

Test Case

https://codesandbox.io/s/useparams-react-router-v6-ky20d?file=/src/App.js

Steps to reproduce

Call useParams in a parent-route and log the result. It will miss all params of its child routes.

Expected Behavior

useParams always returns all params of the current URL regardless of from where / which context it was called.

Actual Behavior

// in /projects.ts
const { projectId } = useParams();
console.log(projectId)
// would print undefined

(see the test case above)

[myNameIsDu]

#7803 (comment)

[timdorr]

Duplicate of #7803