如何从RouteComponentProps获取React组件中的URL数据？

嘿，我来帮你搞定这个问题！你提到的RouteComponentProps其实更多是为类组件设计的，在函数组件里我们有更轻便的方案——React Router提供的专属Hooks，当然如果有特殊需求（比如TypeScript类型约束）也可以结合RouteComponentProps来实现，下面分两种场景给你详细说明：

一、推荐方案：使用React Router Hooks（函数组件首选） #

React Router v5.1+和v6都支持一系列Hooks，能直接获取URL相关信息，无需额外配置，简单高效：

常用Hooks说明： #

• useParams：获取URL中的动态路由参数（比如/user/:userId里的userId）
• useLocation：获取当前页面的location对象，包含pathname（当前路径）、search（查询参数，如?name=foo）、hash等信息
• useRouteMatch：获取当前路由的匹配信息，比如匹配的路径模式

示例代码： #

import { useParams, useLocation, useRouteMatch } from 'react-router-dom';

const App = () => {
  // 获取动态路由参数
  const params = useParams();
  // 获取location对象，包含完整URL相关信息
  const location = useLocation();
  // 获取路由匹配详情
  const match = useRouteMatch();

  // 打印URL相关数据
  console.log('动态路由参数:', params);
  console.log('当前路径:', location.pathname);
  console.log('查询参数（原始）:', location.search);
  // 解析查询参数（比如?name=bar&age=25，获取name的值）
  console.log('解析后的name参数:', new URLSearchParams(location.search).get('name'));
  console.log('当前匹配的路由模式:', match.path);

  return (
    <div className="main">
    </div>
  );
}

export default App;

二、使用RouteComponentProps的场景（适合类组件或TypeScript类型约束） #

如果你需要用RouteComponentProps来做类型定义，或者项目还在使用React Router v5及以下版本，可以通过withRouter高阶组件给组件注入路由属性：

注意：React Router v6已经移除了withRouter，所以v6版本不推荐这种方式，优先用上面的Hooks方案。

示例代码： #

import { RouteComponentProps, withRouter } from 'react-router-dom';

// 如果是TypeScript，可以用RouteComponentProps做类型约束
const App = (props: RouteComponentProps) => {
  console.log('动态路由参数:', props.match.params);
  console.log('当前路径:', props.location.pathname);
  console.log('查询参数:', props.location.search);

  return (
    <div className="main">
    </div>
  );
}

// 用withRouter包裹组件，注入RouteComponentProps的相关属性
export default withRouter(App);

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