Having Trouble Getting Breadcrumbs Working Using useRouterState

[harrismcc]

I'm trying to build a breadcrumbs component that can automatically use the router state to show the correct breadcrumbs for a page. However, I'm having trouble.

I followed the documentation for breadcrumbs and am getting the router state like const matches = useRouterState({ select: (s) => s.matches }); but that gives me an array with the routes ['__root__', '/animals/test'] where ideally I'd have ['animals', 'animals/test'].

My File structure looks like:

What am I missing here? Seems like the route-matching sees animals/test as totally separate than /animals, but I want there to be a parent-child relationship (even though they aren't nested components, and only share the common layout for the whole app`.

Any ideas here for what I'm doing wrong? Thanks!

[SeanCassiere]

In this example structure posted, /animals wouldn't be matched when on the /animals/test route. This is because the animals/index route is separate from animals/test. You could have a /routes/animals.tsx file without any components which'd then always match when you are on a child of the animals path.