Is there a easy way to get path pattern of current location?

[ReetiMauryaCrest]

How can we get path pattern of current URL (or any other URL) easily? The only solution I find everywhere is using matchPath with list of all paths in your site and matching it with current URL to get the pattern. But it cumbersome and I don't exactly have a list of URLs in my whole site in one place. I just want to differentiate between params in URL with static parts of current path, and as the router is obviously matching the path in my routes to redirect me, I think it would already have the pattern, I just can't find where to get that pattern from.

[sergiodxa]

There's no place to get it, why do you need it? What's the actual use case, maybe there's another way to do it.

[ReetiMauryaCrest]

The actual use case isn't that fancy, I just want my site to have different breadcrumbs for different pages which is automatically set using site URLs. I know that I can implement this by creating a list of routes and matching current route with all other routes to find which page I am on and generate bread crumbs based on it.

But this sounds highly inefficient and although I have all of my routes in one place it is still divided into different sections (my site is a little large with 2-3 huge modules with multiple things inside each of them) so I don't want to merge them together just to generate the breadcrumbs. Do you have any other suggestion to implement this?

[sergiodxa]

A router can have a handle export, this export can be anything you want, is a place Remix gives you to put things associated to a route.

Then in your components, you can use useMatches to access the currently matching routes, and this includes the handle.

So what you can do is to add a breadcrumb property to this handle.

export const handle = { breadcrumb: { label: "Something", to: "/path" } };

Then use the hook to get the matches with a handle with a breadcrumb and render the list.

const matches = useMatches().filter(match => match.handle?.breadcrumb)
return (
  <ol>
    {matches.map(match => (
      <li key={match.handle.breadcrumb.to}>
        <NavLink to={match.handle.breadcrumb.to}>{match.handle.breadcrumb.label}</NavLink>
      </li>
    )}
  </ol>
)

Something nice about this is that the matches also include the loader data, so if you need to create the path dynamically you can add a function instead, and call it.

export const handle = {
  breadcrumb(loaderData: SerializeFrom<typeof loader>) {
    // use loaderData to know what to return here
  }
}

Then in your UI

return (
  <ol>
    {matches.map(match => {
      let breadcrumb = match.handle.breadcrumb(match.data)
      return (
        <li key={breadcrumb.to}>
          <NavLink to={breadcrumb.to}>{breadcrumb.label}</NavLink>
        </li>
      )
    }}
  </ol>
)

[ReetiMauryaCrest]

Thank you so much, this is much better than what I was trying to do. This would make it easier to manage all my routes.