useParams in parent route with nested routes

[r3wt]

useParams in parent route with nested params, will include the child route path. eg in my case my routes are like

/products/:id* - Product page
/products/:id/leave-review
/products/:id/edit-review/:reviewId. in this case, in the parent component, if i use params when a child route match, the :id param is the full child path.

i just wanted to share that as i think it is a wrong behavior, however there is a simple workaround i found which is:

const params = useParams<{id:string}>();
const id = useMemo<string>(()=>params.id.split('/')[0],[params]);

this only works assuming there is a trailing slash following your param which should be most common cases (and the one that useParams should ideally support if possible).

[molefrog]

@r3wt Thanks for bringing this up. Would you mind sharing a piece of code that you're using to set up nested routing?