matchPath relative urls

[michaelkay-wrisk]

In one of our applications we have nested routes that drive tabs using material ui.

When we were using v5, to find which was the current active tab based upon the current url (for first load use case when sharing links or refreshing) we used a helper like:

function usePatternMatch(patterns: RouteProps[]) {
  const { pathname: path } = useLocation()
  return patterns.find((pattern) => matchPath(path, pattern) !== null)
}

Where the path passed into this was match.url + '/tab1' for example.

I'm trying to do the equivalent in v6 and not getting anywhere. My tabs now use relative urls but I can't find a way of matching a relative pattern to the full path returned by useLocation or the inverse as a way to access the relative url.

I thought end might be the answer in matchPath but it does not seem to have an effect. The below returns null:

 const match = matchPath(
      {
        path: 'users/:id',
        caseSensitive: false, // Optional, `true` == static parts of `path` should match case
        end: false, // Optional, `true` == pattern should match the entire URL pathname
      },
      '/path1/users/123',
)

Is there a way to match a relative url or another solution to this?

Thanks,

[mbrevda]

see also #8311