useRoutes, useLocation, and matchRoutes to get matching route.path for tabs

[eliw00d]

I am trying to get the active tab which correlates to a matched route.path and have tried using:

const element = useRoutes([
  {
    element: <Profile />,
    path: 'profile',
    title: 'Profile',
  }
])
const location = useLocation()
const [{ route }] = matchRoutes(routes, location)

// use route.path as active tab

However, since my routes are nested under '/users/:userId/*', it never matches the routes because location.pathname is '/users/:userId/profile'.

What can I do to get the route matched by nested, relative paths?