Allow useMatch take RouteDefinition object instead of path.

[minht11]

Basically I want to know which route is currently active outside of <Routes/>, so I can for example change nav bar styles on specific page, currently this is hard to do correctly. So my proposed solution is to allow useMatch take RouteDefinition object so this works:

const LIST_ROUTE = {
  path: '/list',
  component: List,
  children: [
    { path: '/' },
    { path: '/apples' },
    { path: '/oranges' },
    { path: '/banana' },
  ],
}

const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
  LIST_ROUTE,
]

export const App = () => {
  const Routes = useRoutes(routes)
  const isListRoute = useMatch(LIST_ROUTE)

  return (
    <div>
      <Routes />
      <BottomNavBar hide={isListRoute()} />
    </div>
  )
}

Alternative today is to use

const isListRoute = useMatch(() => '/list/*') // Matches everything and is not a correct solution
// or way more complicated
const isListRoute = useMatch(() => '/list/')
const isListAppleRoute = useMatch(() => '/list/apple') 
const isListOrangeRoute = useMatch(() => '/list/orange') 
const isListBananaRoute = useMatch(() => '/list/banana') 
const isListRouteActive= createMemo(() => isListRoute() && isListAppleRoute() && isListOrangeRoute() && isListBananaRoute())

There might be some other way to solve this like having <Routes /> fire change event with matched route id.

[orenelbaum]

I think that this API is a bit awkward and I'd probably prefer something like this

useMatch('/list', { matchChildren: true })
useMatch('/list', { matchChildren: true, matchChildrenOnly: true })

See also this issue #127
According to the original proposal it could be

useMatch(path`/list/${['apple', 'orange', 'banana']}`)

Or the way I'd prefer, something like

useMatch('/list/(apple|orange|banana)')