React Router v6类组件this.props.match.params失效如何解决

你遇到的参数获取失败问题和选择BrowserRouter还是HashRouter没有关系，核心原因是你使用的是React Router v6版本：

• 该版本废弃了v5版本中自动给路由渲染组件注入match/location/history路由属性的逻辑，因此直接访问this.props.match会得到undefined
• 类组件不支持直接调用useParams这类React Hook，所以无法直接复用函数组件的参数获取方式

方案1：自定义高阶组件适配类组件（改动最小） #

你可以自己实现一个极简的路由包裹高阶组件，通过Hook拿到路由参数后作为普通props传入类组件，不需要改动现有类组件的核心逻辑。
修改PkmnStats.js代码如下：

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

class PkmnStats extends Component {
    state = {
        name:'',
        index:'',
        imageUrl:''
    };
    
    async componentDidMount(){
        // 直接从props中获取高阶组件传入的路由参数
        const {index} = this.props.params;
        const pkmnUrl = `https://pokeapi.co/api/v2/pokemon/${index}/`
        const pkmnResponse = await axios.get(pkmnUrl);
        const name = pkmnResponse.data.name;
        this.setState({ name });
    }

    render(){
        return (
            <div>
               <h1>{this.state.name}</h1>
            </div>
        )
    }
}

// 高阶组件：用Hook拿到路由参数，传给类组件
const PkmnStatsWithRouter = () => {
    const params = useParams();
    return <PkmnStats params={params} />
}

export default PkmnStatsWithRouter;

App.js中的路由配置不需要修改，现有写法符合React Router v6规范。

额外修复项 #

你在PkmnCard.js中的跳转链接写的是相对路径，建议修改为绝对路径，避免非首页场景下跳转异常：
将原代码：

<Link to={`pokemon/${this.state.index}`}>

修改为：

<Link to={`/pokemon/${this.state.index}`}>

方案2：重构为函数组件（长期维护推荐） #

如果不需要保留类组件写法，直接将组件改写为函数组件即可原生支持useParams，代码更简洁：

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

export default function PkmnStats() {
    const [name, setName] = useState('')
    const { index } = useParams()

    useEffect(() => {
        const getPokemonData = async () => {
            const pkmnUrl = `https://pokeapi.co/api/v2/pokemon/${index}/`
            const res = await axios.get(pkmnUrl)
            setName(res.data.name)
        }
        getPokemonData()
    }, [index])

    return (
        <div>
            <h1>{name}</h1>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Brad G.