`useMatch` not able match more than one param

Describe the bug If my URL contains more than one param like /menu/:menuId/sub/:subId, useMatch will only return menuId when the route is match. I also use useMatchRoute to make sure that the route is really matches.

To Reproduce Steps to reproduce the behavior:

1. Create a route that contains two params or more, like /menu/:menuId/sub/:subId
2. In the corresponding route element, call useMatch
3. And observe the params that return by useMatch

Expected behavior The useMatch should return both menuId & subId

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Microsoft Edge
• Version: 96.0.1054.43

[chungweileong94]

I personally find that the useMatches is quite difficult to use in scenarios like if I want to get all the match params. It would be great if we have something like const params = useParams().

As for now, I created a custom hook to merge all the match params from useMatches, it feels hacky, but works for me

export const useParams = <TGenerics extends PartialGenerics = DefaultGenerics>() => {
  const matches = useMatches<TGenerics>();
  const params = useMemo(
    () =>
      matches.reduce((result, match) => {
        return {...result, ...match.params};
      }, {} as TGenerics['Params']),
    [matches],
  );
  return params;
};

[chungweileong94]

Why won’t useMatch().params not work? They are merged down the match tree to include parent params. Tanner Linsley … On Dec 23, 2021, 9:50 AM -0700, Chung Wei Leong @.>, wrote: > Yeah, my point is that you don’t have to do that, if you setup your MakeGenerics like in the example I showed you. > Do you have MakeGenerics setup? You won’t need to merge them all together like that if you do. Hmm, I understand that, but from what I know MakeGenerics is just a type. The problem I was facing will happen on both JavaScript & TypeScript, setup the MakeGenerics won’t magically merge them all. For Example: export type LocationGenerics = MakeGenerics<{ Params: { postId: string; commentId: string; }; }>; const location = new ReactLocation<LocationGenerics>(); const routes: Route<LocationGenerics>[] = [ … {path: ‘/post/:postId/comment/:commentId’, element: <Page />}, {path: ‘/post/:postId’, element: <Page />}, … ]; … // Let say the route is “http:locahost:3000/post/1/comment/2” const matches = useMatches<LocationGenerics>(); The matches will be an array of all match results, that’s why I still have to search through the array to get the correct match that contains the params I want [ { // … params: {postId: 1}, }, { // … params: {postId: 1, commentId: 2}, }, ]; If I use useMatch, it will return { // … params: {postId: 1}, }, Which is definitely not something I want to use. — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.Message ID: @.>

Uh my bad, you are right, I’m actually confused by my current code setup. Yeah, it works as expected now👍