React Router v6: get router path with params names

Question

I have a route with dynamic path, using params:

<Route
    path="/main/:id"
    element={
        <Page />
    }
/>

When I reach that page, using React Router useLocation, I'm able to get the full path:

"/main/5432gt34"

Is there a way to retrieve the path with the params name instead of the actual path? (output I'm looking for is:)

"/main/:id"

I'm hoping this might be possible since React Router is aware of the params inside the path and you can extract those with useParams

Can you explain your use case for this, as i would have thought you only have one component for that route and therefor within the Page component you can always assume the path is "/main/:id" — Devon Ray, Nov 24 '22 at 13:42
Yes exactly I have a few routes such as "/main", "/main/:id" and "/main/edit" and they all point to the same component, but besides rendering that component I'd like to fetch some data, so a fixed path name such as "/main/:id" would help me, otherwise I could use regex of course but I hoped there's a native clean solution by React Router, because the downside of using regex for this is that if I change the structure of path I will need to adapt the regex function — sir-haver, Nov 24 '22 at 14:02

IestynGage · Answer 1 · 2022-11-28T18:56:15.563

Solution 1: You could pull the id from the string using a regex.

var location = useLocation();
var myRegexp = /main\/(.*)/;
var id = myRegexp.exec(location.pathname)[1];

Little explanation of the regex:

\/ allows us to do match with "main/"
(.*) gives the rest of the match as a second result in returned array.

Once you have the id you can store it a reactContext so that it can be used in any child component.

Solution 2: useRouteLoaderData

This solution would require you to refactor your router so that it one of the data routers but afterwards you should be able to do:

const user = useRouteLoaderData("id");

That would only work for this specific instance,op is searching for broad solution. — MalwareMoon, Nov 27 '22 at 16:52

score 0 · Answer 2 · answered Nov 25 '22 at 15:34

I don't think react router gives a way to do this but you could do something like this if you're trying to find an easy solution.

<Route
    path="/main"
    element={
        <Page type="index"/>
    }
/>
<Route
    path="/main/:id"
    element={
        <Page type="id"/>
    }
/>

then handle the type parameter in your page component.

score 0 · Answer 3 · answered Nov 27 '22 at 16:53

I doubt that it's possible but you can always just pass it as property.

<Route
    path="/main/:id"
    element={
        <Page 
            path="/main/:id"
        />
    }
/>

Aside from that answer for this is here: react-router v6: get path pattern for current route

score 0 · Answer 4 · answered Nov 27 '22 at 18:27

Yes you can do it by using useParams only if you know the prefix (You're sure that the path starts with "/main" and the rest is dynamic as you mentioned in your question):

let params = useParams();
useEffect(() => {
  let dynamicPath = "/main";
  Object.keys(params).forEach((key) => {
    dynamicPath += `/:${key}`;
  });
  console.log(dynamicPath);
}, []);

React Router v6: get router path with params names

4 Answers4