useMatch returns root

[StephenStrickland]

I've got a basic route setup with no nested routes. I'm wanting to dynamically update my page template with the route's title.

Whenever I try to use useMatch in my template component (that's contained within the Router declaration) the root route is always returned and route is always null. I have a workaround by using useMatches that returns all routes that match and I can pull the last route in the list to compute the title.

Maybe I misread something, but from the documentation, I expected useMatch to always return the current route. Should I set up my routes differently?

Routes look like:

const routes = [
{
 path: '/',
 element: <Index />,
 meta: { title: 'Home'}
},
{
 path: '/about',
 element: <AboutPage/>,
 meta: { title: 'About'}
},
{
 path: '/blog',
 element: <BlogPage/>,
 meta: { title: 'Blog'}
},
]