How to access URL parameters in the class component using React Router v6

When dealing with React Router v6, we’ll teach you how to access the URL parameters in the class component. Refer to the following article, if you don’t know how to use Router v6 in React to build routing.

Routing in React using React Router v6

Issue

Route components no longer contain route props (history, location, and match) in react-router-dom v6, hence the current approach is to utilise React hooks “versions” of these within the displayed components. React Hooks, on the other hand, cannot be used in class components.

Let’s assume that you have the following project structure and routes where we get the product ID from the URL and display it in the Product.js.

File Structure

  • react-vertical-timeline-example
    • node_modules
    • public
      • index.html
    • src
      • App.js
      • Home.js
      • index.css
      • index.js
      • Product.js
    • package-lock.json
    • package.json
    • README.md
App.js
Product.js

Now if you will check the props in the Product.js component then it will be an empty object. Look at the following image where you will see the empty props in console log.

Output (Before) - How to access URL parameters in the class component using React Router v6 - Clue Mediator
Output (Before) – How to access URL parameters in the class component using React Router v6 – Clue Mediator

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

Solution

To solve this issue, we have to convert a class component to functional component. For that we will create withRouter.js HOC (Higher Order Component).

withRouter.js

And decorate the Product component with the new HOC.

This will inject a params prop for the class component.

So your updated code should come like below.

Product.js

Now check the output again.

Output (After) - How to access URL parameters in the class component using React Router v6 - Clue Mediator
Output (After) – How to access URL parameters in the class component using React Router v6 – Clue Mediator

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *