react-router-dom 4.2.2版本中'useParams'导出不存在的问题求助

问题根源 #

你遇到的两个核心问题：

1. useParams不存在于v4.2.2：useParams是React Router在v5.1.0版本才新增的Hook，你的v4.2.2版本根本没有这个导出，所以会报错。
2. Hook不能在类组件中使用：就算你升级到了支持useParams的版本，useParams作为React Hook，也只能在函数组件或者自定义Hook里调用，不能直接在类组件的生命周期方法里使用。

另外你的代码里还有个小错误：const { catid } = params.catid; 这行是错误的解构写法，应该是const { catid } = params; 或者直接const catid = params.catid;。

解决方案1：不升级React Router版本（推荐，适配你的v4.2.2） #

在React Router v4中，路由渲染的组件会自动接收match、location、history这三个props，你可以直接通过this.props.match.params获取URL参数。

修改后的Comp1组件代码：

import React, { Component } from 'react';

export default class Comp1 extends Component {
  componentDidMount() {
    // 从props的match对象里获取catid参数
    const { catid } = this.props.match.params;
    console.log(catid);
  }

  componentDidUpdate(prevProps) {
    // 如果需要在参数变化时重新处理，别忘了对比prevProps
    if (this.props.match.params.catid !== prevProps.match.params.catid) {
      const { catid } = this.props.match.params;
      console.log('catid updated:', catid);
    }
  }

  render() {
    // 也可以在render里直接使用参数
    const { catid } = this.props.match.params;
    return (
      <div>
        Hello, I am class Comp1. Current catid: {catid}
      </div>
    );
  }
};

解决方案2：升级React Router版本（如果需要使用Hook） #

如果你想使用useParams，需要先升级react-router-dom到v5.1.0及以上版本（或者直接升级到最新的v6，但v6的路由API有较大变化）：

升级到v5.x版本

1. 执行升级命令：

npm install react-router-dom@5.3.0
# 或者用yarn
yarn add react-router-dom@5.3.0

2. 如果你想改用函数组件，可以这样写Comp1：

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

export default function Comp1() {
  const { catid } = useParams();

  useEffect(() => {
    console.log(catid);
  }, [catid]);

  return (
    <div>
      Hello, I am function Comp1. Current catid: {catid}
    </div>
  );
}

3. 如果还是想用类组件，v5.x依然支持this.props.match.params的方式，和v4的用法一致。

升级到v6版本（可选，API变化较大）

v6里Route的写法改成了元素形式，类组件获取参数需要用useParams的话，需要用高阶组件包裹，或者改用函数组件：

// Route配置改成这样
<Route path="/Comp1/:catid" element={<Comp1 />} />

// 类组件需要用withRouter高阶组件包裹才能获取参数
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Comp1 extends Component {
  componentDidMount() {
    const { catid } = this.props.match.params;
    console.log(catid);
  }

  render() {
    const { catid } = this.props.match.params;
    return <div>Hello, I am class Comp1. Current catid: {catid}</div>;
  }
}

export default withRouter(Comp1);

内容的提问来源于stack exchange，提问作者Mobygo