How to pass params into link using React router v6?

by

Issue(s)

  1. react-router-dom v6 Route components rendered via the element prop don’t receive route props.
  2. Route children components must use react hooks to access the route context, i.e. useParams, useLocation, useNavigate, etc… and therefore must be function components.
  3. There no longer exists a withRouter Higher Order Component.

Solution

DetailsPage is a class-based component so I see a couple options for getting access to the route’s match params.

  1. Convert DetailsPage to be a function component and use the useParams react hook.
  2. Write your own withRouter HOC to access the route context and pass as props any of the react-hook accessible values.

I won’t cover converting a class-based component to a function component, but can provide a simple HOC solution to pass to DetailsPage (or any other class-based component) the match params.

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

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

You can now wrap & export your class-based components in the very familiar way they were from v4/v5.

v6 api-reference

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  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 push to History in React Router v4?
  21. How to pass params with history.push/Link/Redirect in react-router v4?
  22. How to get history on react-router v4?
  23. React router changes url but not view
  24. Why do I get the error “expressions must have one parent element”, how do I fix this?
  25. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  26. How to use Private route in react-router-dom@v6
  27. Difference in the navigation (React Router v6)
  28. react router v6 No routes matched location
  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