React Router v6: get router path with params names - reactjs

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

Answer 1

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.

Answer 2

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

Answer 3

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);
}, []);

Answer 4

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");