SolidJS•7mo ago

Get array of matched nested routes

I'm using @solid/router and would like to create a way to build breadcrumbs based on the nested routes I'm in, similar to useMatches() in Remix. Even if it just returned the simple array of matched routes, I could assign a key to each route and find a simple way to get a title and icon from there for breadcrumbs. I've searched through GitHub and here in Discord to find previous conversations and none of them seemed to find a solution, or at least didn't check back in to share. Has anyone done this or have good ideas of where to start building from scratch? Here's an alternate solution, but I don't want to get into portals and pushing to the array from the routes themselves: https://stackblitz.com/edit/solidjs-templates-wwykia?file=src%2Froutes%2Fone%2Ftwo%2Fthree.tsx Remix's useMatches(): https://remix.run/docs/en/1.19.3/hooks/use-matches Could utilize RouteDefinition .info: https://github.com/solidjs/solid-start/discussions/537#discussioncomment-8833782

5 Replies

Parker CodesOP•7mo ago

The best way I can think of doing this in userland is to traverse the tree and somehow check if each depth matches. I can't use useMatch() because it's a one-time check and not a signal subscription. I'd want to reutilize the same matching mechanism as the router to avoid discrepancy. Pinging some friends 🙂 @Atila @Alex Lohr

Alex Lohr•7mo ago

We only have useMatch, but that only gives you information about the current route. The only chance I see is useRouter and check if there's any way to access the routes.

Parker CodesOP•7mo ago

Another friend, Fabien (can't find him with @) had a great proposed solution: The latest version of solid-router includes a new hook useCurrentMatches(), so this is only available as of last week! Great timing for me and my team. 😄 https://github.com/solidjs/solid-router?tab=readme-ov-file#usecurrentmatches Then for route metadata we can add an extra info to each route. Here's an example new hook he wrote based on this:

export function useBreadcrumbs() {
    const matches = useCurrentMatches();

    return matches
        .map(i => {
            if (i.route?.info?.breadcrumb) {
                return { title: i.route.info.breadcrumb as string, path: i.path };
            } else {
                return null;
            }
        })
        .filter(i => i !== null);
}

export function useBreadcrumbs() {
    const matches = useCurrentMatches();

    return matches
        .map(i => {
            if (i.route?.info?.breadcrumb) {
                return { title: i.route.info.breadcrumb as string, path: i.path };
            } else {
                return null;
            }
        })
        .filter(i => i !== null);
}

Atila•7mo ago

interesting. So that means not all segments in our URL have a route component attached to them 🤔 yeah, I think that’s the best solution possible! I’ll get it to the docs team so we can document this method on the official docs!! 🏆🏆

Alex Lohr•7mo ago

Maybe this could be the start of a new router-package for #solid-primitives?

Gaming

Programming

Get array of matched nested routes