“react-router-dom”不包含名為“useParams”的導出

Question

在 App.js 中，我有以下路線：

<Route path="/Comp1/:catid">
    <Comp1 />
</Route>

可以通過使用單個參數單擊此鏈接來調用此路由：

<Link to={'/Comp1/' + catid}>Comp1 </Link>

參數 catid 始終具有特定值。

Comp1 是一個組件，定義如下：

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

export default class Comp1 extends Component {

    componentDidMount() {
        const params = useParams();
        const { catid } = params.catid;
        console.log(catid);
    }

    componentDidUpdate() {

    }

    render() {
        return (
            <div>
                Hello, I am class Comp1
            </div>
        );
    }
};

但是現在發生的是在運行時，我得到以下調試 output：

“react-router-dom”不包含名為“useParams”的導出

- 編輯 -

react-router-dom 的安裝版本是 4.2.2。

Answer 1

肯定是版本問題。 在這個官方問題中也有討論。

解決方案：確保您使用的是react-router-dom@>=5.1 ，因為該特定鈎子是在5.1 版本中引入的。

如果您在安裝正確版本的模塊時遇到困難，那么就是練習它的最佳時機，特別是因為如果您不這樣做，它很可能會一次又一次地發生。