Relative, partial route match

[mbrevda]

In v6, how can a path be partially matched (relative to its hierarchy) without knowing the complete hierarchy? For example, if a navigation element is in the middle of the hierarchy, how can it match just the relative part of the path?

e.g. with the following routes:

/users
/users/1
/users/1/edit

Assuming there was a visual user picker which returned (just) the user's id - how could the current id be determined via the route alone?

Here is a code sandbox illustrating the same issue using MUI's Tabs component. The idea would be for the active tab to show as active (as in this demo).

[ryanflorence]

Maybe I'm misunderstanding but that's how NavLink works already:

https://reactrouter.com/docs/en/v6/api#navlink

<NavLink
  to="/users"
  style={({ isActive }) =>
    // should be active at /users, /users/1, and /users/1/edit
    isActive ? activeStyle : undefined
  }
>
  Users
</NavLink>

<NavLink
  to="/users"
  end
  style={({ isActive }) =>
    // only active at /users
    isActive ? activeStyle : undefined
  }
>
  Users
</NavLink>

Or use the hook:

let match = useMatch("/some/:pattern");
// will match /some/123
// as well as /some/123/more

let match  = useMatch({
  pathname: "/some/:pattern",
  end: true
});
// will only match /some/123

[mbrevda]

useMatch seems to require knowing the absolute path. Is there a way for it to match relative to its current location? (Just like routes, that can be nested, and matched relatively to their position)