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...

4 Responses

  1. Elodie says:

    Hello, Thanks for your tutorial,but when use it like you ,I ‘ve this error : Line 5:18: React Hook “useParams” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function ; Can you tell me what should I do please. I think I’ve respect all your tutorial.
    Thank you

    • Clue Mediator says:

      Hi Elodie, it looks like you are calling the hooks inside the class component. You have to create a functional component and use hooks there and then, you can wrap it.

  2. Luiz Carlos says:

    How i can to fix the problem “Component definition is missing display name” ?

    • Clue Mediator says:

      Add displayName to the component as below.

      const MyComponent = () => (
      // ...
      );

      MyComponent.displayName = 'MyComponent';

      export default MyComponent;

Leave a Reply

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