Is there a way to get current path pattern?

[hyunjunian]

Is there a way to get current path pattern in v5?

I cannot find any function for hook to get this.

ex. When you are on "/user/1234", then you will get "/user/:id"

Or is there a way to get all path patterns from Router?

[kiliman]

There's no built-in function to do exactly what you want, but we can create it.

First of all, you'll need to define your route config as an object that you pass to createBrowserRouter¹. This is used by the RR helper matchRoutes². This returns the matching route config based on the URL that you pass. We then write a helper function, getRouteMatchPath, to generate the actual route path.

Here's a sample StackBlitz that shows how it works.

⚡️ StackBlitz https://stackblitz.com/edit/github-vr2mys?file=src%2Fapp.tsx

// Helper function that uses results from `matchRoutes`
// and builds up the path by navigating the route config
function getRouteMatchPath(
  routes: RouteObject[],
  location: Partial<Location> | string
) {
  const matches = matchRoutes(routes, location);
  const getPath = (route: RouteObject) => {
    let path = route.path!;
    if (route.children?.length) {
      path += getPath(route.children[0]);
    }
    return path;
  };
  if (matches?.length) {
    return getPath(matches[0].route);
  }
  return null;
}

Footnotes

1. https://reactrouter.com/en/main/routers/create-browser-router ↩

2. https://reactrouter.com/en/main/utils/match-routes ↩

[hyunjunian]

Thank you for your great answer!

[HananoshikaYomaru]

how do you get the path pattern in server side where useLocation cannot be used? @kiliman

[Erij-Maherzia-BEN-BRAHIM]

@HananoshikaYomaru inside your loader or your action you can do like this

export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const path= url.pathname
}