import error: 'useParams' is not exported from 'react-router-dom'-CodePudding

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);

CodePudding user response：

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

CodePudding user response：

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:

How to get params in component in react router dom v4?

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.