如何通过React Router获取URL参数？以获取BonusScreen的id为例

没问题，我来帮你搞定在BonusScreen组件里获取URL中:id参数的事儿！根据你给出的路由配置（看起来是React Router v5版本），下面分两种组件类型给出实现方案：

1. 函数组件（推荐，对应你提到的useParams钩子用法） #

首先要确保你从react-router-dom中导入useParams钩子，然后在组件里直接解构出id参数就行，步骤如下：

import React from 'react';
// 从react-router-dom导入useParams钩子
import { useParams } from 'react-router-dom';

const BonusScreen = () => {
  // 解构获取URL中的id参数
  const { id } = useParams();

  // 打印参数到控制台验证
  console.log('当前获取到的id:', id);

  return (
    <div className="bonus-screen">
      <h2>Bonus详情页</h2>
      <p>当前ID: <strong>{id}</strong></p>
    </div>
  );
};

export default BonusScreen;

2. 类组件（如果你使用类组件的话） #

如果BonusScreen是类组件，你需要用withRouter高阶组件包裹组件，然后通过props.match.params来获取id：

import React, { Component } from 'react';
// 导入withRouter高阶组件
import { withRouter } from 'react-router-dom';

class BonusScreen extends Component {
  componentDidMount() {
    // 从props中获取id参数
    const { id } = this.props.match.params;
    console.log('当前获取到的id:', id);
  }

  render() {
    const { id } = this.props.match.params;
    return (
      <div className="bonus-screen">
        <h2>Bonus详情页</h2>
        <p>当前ID: <strong>{id}</strong></p>
      </div>
    );
  }
}

// 用withRouter包裹组件，让组件能拿到路由相关的props
export default withRouter(BonusScreen);

额外注意点 #

• 你的路由配置<Route path="/bonus/:id" exact component={BonusScreen}/>是正确的，:id就是用来匹配URL中/bonus/后面的动态参数（比如/bonus/123里的123）。
• 如果你后续升级到React Router v6，Switch会被Routes替代，但useParams的用法基本一致，只是路由组件的写法会变成<Route path="/bonus/:id" element={<BonusScreen />} />。

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