How to retrieve the matched route string before interpretation in react-router

[ziponia]

Hello everyone,
What is the way to get the matched route using react-router?

For example,

function MyRouter() {
    return (
       <Routers>
         <Route path="/user/:id" element={<User />}/>
      </Routes>
    )
}

user.jsx

function User() {

    const matchPattern = useSomeHook();
    matchPattern // /user/:id
    
    return <div />
}

Like above,

I want to get the string before the pattern like /user/:id is interpreted.

Please ignore the syntax 😁 Just try to understand the context. Thank you.

[kiliman]

Here's an example that does what you're asking.

// 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;
}

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

[GabenGar]

How do you deal with circular references from passing the entire router config around?
I.E. I want to see a path pattern in a top level route error element, but said element is also included in the router config, so the function just doesn't work.

[jdnichollsc]

@kiliman hey mate, thanks a lot for sharing that example! do you know if there's a way to do that from the server side using React router v7 with Framework mode?