React router v6 easiest way to access params outside route

react-router v6: The most easiest way to get an id from url. Caution(This only works if your component is a child of a componentThis only works if your component is a child of a component)

import { useParams } from "react-router-dom";
const { id } = useParams();

return(
    <>
        
 This is useParams id = {id} 
    
);

You can use matchPath:

react-router v6:

const match = matchPath({ path: "/users/:id" }, "/users/123");

react-router v5:

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false
});

The id route match param is only available on the params object of all ancestor and descendent Route components within a Routes component.

If the Menu component is capable of using the useParams hook (and there's a way to inject params as a prop if Menu is a class component) there is a refactor you can do where Menu is rendered as part of a layout along with an Outlet component and it will then be in the route hierarchy to access the route params.

   // <-- descendent route match params accessible here
         // <-- nested routes rendered here
      
    }
  >
    } />
    Id" element={} />
  

Example Menu component:

const Menu = () => {
  const params = useParams();
  console.log("Menu", params);
  return ...;
};