Allow useMatch take RouteDefinition object instead of path.

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.

Start from the useMatch and useRoutes entry points and the RouteDefinition type described in the issue. Determine how a RouteDefinition object could identify the active route, then confirm that matching nested routes works while the existing path-based useMatch behavior remains intact.