React-router-v6 access a url parameter

by

Issue

In react-router-dom v6 the Route components no longer have route props (history, location, and match), and the current solution is to use the React hooks “versions” of these to use within the components being rendered. React hooks can’t be used in class components though.

To access the match params with a class component you must either convert to a function component, or roll your own custom withRouter Higher Order Component to inject the “route props” like the withRouter HOC from react-router-dom v5.x did.

Solution

I won’t cover converting a class component to function component. Here’s an example custom withRouter HOC:

const withRouter = WrappedComponent => props => {
  const params = useParams();
  // etc... other react-router-dom v6 hooks

  return (
    <WrappedComponent
      {...props}
      params={params}
      // etc...
    />
  );
};

And decorate the component with the new HOC.

export default withRouter(Post);

This will inject a params prop for the class component.

this.props.params.id

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React Router v4 renders multiple routes
  4. How to pass params into link using React router v6?
  5. react-router-dom v6 useNavigate passing value to another component
  6. Detect Route Change with react-router
  7. Simple Conditional Routing in Reactjs
  8. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  9. Invariant failed: You should not use outside a
  10. useNavigate() may be used only in the context of a component
  11. React Router Dom v6 shows active for index as well as other subroutes
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. How to get history on react-router v4?
  21. React Router v4 – How to get current route?
  22. How do I pass state through React_router?
  23. ReactJS: [Home] is not a component. All component children of must be a or
  24. React Router not working with Github Pages
  25. react routing is able to handle different url path but tomcat returns 404 not available resources
  26. React router 4 does not update view on link, but does on refresh
  27. React: Hide a Component on a specific Route
  28. How to generate sitemap with react router
  29. You cannot render a inside another . You should never have more than one in your app
  30. How to remove the hash from the url in react-router

Leave a Comment