導入錯誤：“useParams”未從“react-router-dom”導出

Question

我正在使用 "react-router-dom": "^4.2.2" 但 useParams 不起作用我該怎么辦？

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

Answer 1

自react-router 起添加了useParams 、 useLocation 、 useHistory和useRouteMatch掛鈎

對於 react-router-dom v4.x 關於如何獲取 URL 參數的問題，已經有很多問題了：

• 如何在反應路由器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 .

Answer 2

正如@slideshowp2 提到的，您的react-router-dom版本應該等於或大於 5.1

使用以下命令將您的 react-router-dom 更新到最新版本

npm i react-router-dom@latest

或者更新到特定版本

npm install react-router-dom@5.1.2