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

Checkout more articles on ReactJS

• How to create a vertical timeline component in React
• Drag and Drop sortable list in React
• How to use componentWillUnmount() in React Hooks
• useReducer in React Hook
• Detect click outside a react component using React Hooks

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

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import Home from './Home';
import Product from './Product';

function App() {
  return (
    <browserrouter>
      <div class="navbar">
        <link to="/">Home
        <link to="/product/1">Product 1
        <link to="/product/2">Product 2
        <link to="/product/3">Product 3
      </div>
      <routes>
        <route path="/product/:id" element="{<Product">} />
        <route path="/" element="{<Home">} />
      </route></route></routes>
    </browserrouter>
  );
}

export default App;

Product.js

import React, { Component } from 'react';

class Product extends Component {
  render() {
    console.log('Props:', this.props)
    return (
      <h3>Product Page</h3>
    )
  }
}

export default Product;

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

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

import React from 'react';
import { useParams } from 'react-router-dom';

const withRouter = WrappedComponent => props => {
  const params = useParams();

  return (
    <wrappedcomponent {...props}="" params={params}>
  );
};

export default withRouter;
</wrappedcomponent>

And decorate the Product component with the new HOC.

export default withRouter(Product);

This will inject a params prop for the class component.

this.props.params.id

So your updated code should come like below.

Product.js

import React, { Component } from 'react';
import withRouter from './withRouter';

class Product extends Component{
  render() {
    console.log('Props:', this.props)
    return (
      <>
        <h3>Product Page</h3>
        <div>Id: {this.props.params.id}</div>

    )
  }
}

export default withRouter(Product);

Now check the output again.

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