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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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 className='navbar'> <Link to="/">Home</Link> <Link to="/product/1">Product 1</Link> <Link to="/product/2">Product 2</Link> <Link to="/product/3">Product 3</Link> </div> <Routes> <Route path="/product/:id" element={<Product />} /> <Route path="/" element={<Home />} /> </Routes> </BrowserRouter> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 | 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.
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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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; |
And decorate the Product component with the new HOC.
1 | export default withRouter(Product); |
This will inject a params prop for the class component.
1 | this.props.params.id |
So your updated code should come like below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
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
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.
How i can to fix the problem “Component definition is missing display name” ?
Add
displayNameto the component as below.const MyComponent = () => (// ...
);
MyComponent.displayName = 'MyComponent';
export default MyComponent;
thank you!! Very good explained!! It helped me A LOT!!!
Glad it helped!
Thank you, i love you!!! You had helped me!
Glad it helped!
Excellent tutorials for adding the params in React Router v6. You save my day. Thank you!
Glad it helped!