-2

I'm using "react-router-dom": "^4.2.2" but the useParams not working what should I do?

import { useParams } from 'react-router-dom';
import DATA from '../Data';

const ProductDetail = () => {
    {/* Now we need a product id which is pass from the product page. */}
    const proid = useParams();
    const proDetail = DATA.filter(x => x.id == proid.id)
    const product = proDetail[0];
    console.log(product);
Lin Du
  • 88,126
  • 95
  • 281
  • 483
Agus Rifaldi
  • 19
  • 1
  • 4

2 Answers2

3

As @slideshowp2 Mentioned, your react-router-dom version should be equals to or greater than 5.1

Update your to react-router-dom to the latest version using the following command

npm i react-router-dom@latest

Or update it to the specific version

npm install react-router-dom@5.1.2
Jayant Singh
  • 31
  • 2
0

useParams, useLocation, useHistory, and useRouteMatch hooks were added since react-router v5.1.0

For react-router-dom v4.x about how to get the URL params, there are many questions already:

For react-router-dom v5.1.0+, you can use useParams hook to get the URL params: codesandbox, you can change the URL to https://fmw9k.csb.app/blog/joke and see the logs in the console.

Lin Du
  • 88,126
  • 95
  • 281
  • 483