React-router-dom v6：如何通过URL参数路由子组件并正确获取参数？

1. 正确配置路由（以React Router v6为例） #

别用通配符*，直接明确定义参数占位符就能解决参数解析问题，同时保证子组件正常渲染。路由配置示例：

import { Routes, Route } from 'react-router-dom';
import PageA from './PageA';

function App() {
  return (
    <Routes>
      {/* 明确指定参数，无需* */}
      <Route path="/worker/:documentType/:workerID" element={<PageA />} />
      {/* 其他路由... */}
    </Routes>
  );
}

2. 在PageA中获取参数并渲染子组件 #

用useParams直接拿到正确的参数，再根据documentType渲染对应子组件，同时传递数据：

import { useParams } from 'react-router-dom';
import ActsTable from './ActsTable';
import ContractsTable from './ContractsTable';

function PageA() {
  // 直接解构出两个参数
  const { documentType, workerID } = useParams();
  // 假设这里是你要传给子组件的业务数据，比如从接口获取的worker信息
  const workerData = { id: workerID, name: '示例员工', /* 其他字段 */ };

  // 根据参数渲染对应子组件
  if (documentType === 'acts') {
    return <ActsTable workerData={workerData} />;
  } else if (documentType === 'contracts') {
    return <ContractsTable workerData={workerData} />;
  } else {
    return <div>无效的文档类型</div>;
  }
}

export default PageA;

3. 排查之前不用*时子组件不渲染的原因 #

如果之前去掉*子组件就不显示，大概率是这几个问题：

• 路由层级冲突：比如PageA被嵌套在其他带前缀的路由下，导致实际匹配路径和你定义的/worker/:documentType/:workerID不一致，检查父路由的路径前缀。
• 子组件自身逻辑问题：比如子组件依赖的数据没传对，或者内部有条件渲染的bug，可以先在PageA里直接写死渲染子组件，排除路由影响。
• React Router版本问题：如果用的是v5，路由要改用Switch，组件通过component属性传递，路径写法一致：

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/worker/:documentType/:workerID" component={PageA} />
    </Switch>
  );
}

核心提醒 #

*是用来匹配所有未定义路由（比如404页面）的，别拿来匹配带明确参数的路径，否则会把整个后缀路径都当成*的值，自然拿不到单独的documentType和workerID。

内容的提问来源于stack exchange，提问作者Иван Северинец