如何在React Router v4的同级组件中获取路由参数？

这个问题我之前也遇到过！核心问题在于withRouter给你的是当前组件所在路由上下文的匹配信息，而不是你想要的/class/:id路由的参数——因为你的<ClassList/>是无条件渲染在根层级，不是被/class/:id这个路由渲染出来的，所以它的match对象自然是根路由的（路径为/），拿不到class id参数。

下面给你两种针对性的解决方案，分别适配函数组件和类组件：

方案一：函数组件用useRouteMatch钩子 #

React Router v4提供了useRouteMatch钩子，它可以手动匹配指定的路由模式，不管当前组件是不是被路由渲染的。直接在<ClassList/>里用它就能拿到class id：

import { useRouteMatch } from 'react-router-dom';

function ClassList() {
  // 手动匹配我们关心的路由模式：/class/:classId
  const match = useRouteMatch('/class/:classId');

  if (match) {
    // 匹配成功时，从match.params里取出classId
    const { classId } = match.params;
    return (
      <div className="highlight-content">
        当前选中的班级ID：{classId}（高亮展示）
      </div>
    );
  }

  // 没有匹配到/class/:classId路由时，显示默认内容
  return <div>请选择一个班级查看详情</div>;
}

export default ClassList;

方案二：类组件用matchPath+withRouter #

如果你用的是类组件，可以结合withRouter注入的location对象，再用React Router内置的matchPath函数手动匹配路径：

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

class ClassList extends Component {
  render() {
    const { location } = this.props;
    
    // 定义要匹配的路由规则
    const match = matchPath(location.pathname, {
      path: '/class/:classId',
      exact: false, // 允许嵌套路由（比如/class/123/students也能匹配到）
      strict: false
    });

    if (match) {
      const { classId } = match.params;
      return (
        <div className="highlight-content">
          当前选中的班级ID：{classId}（高亮展示）
        </div>
      );
    }

    return <div>请选择一个班级查看详情</div>;
  }
}

// 用withRouter注入location对象
export default withRouter(ClassList);

这两种方案的核心思路都是主动匹配目标路由模式，而不是依赖组件自身的路由上下文匹配信息，完美解决了你“无条件渲染组件，仅在有可用id时高亮”的需求。

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