React Routing传递query param查询参数时路由匹配失效问题求助

问题根因 #

你当前路由不匹配的核心原因是 React Router 的path配置仅识别URL的路径部分，不会匹配?之后的查询参数串，你将查询参数直接写在path定义里会导致规则完全无法和实际路径匹配。

解决方案 #

1. 修正路由配置

首先把path里的查询参数全部移除，仅保留路径部分即可：

• React Router v5版本配置：

<Route path="/category/:param1?/:param2?/:param3?" component={Category} />

• React Router v6版本配置（注意v6已弃用component属性，改用element属性传递组件）：

<Route path="/category/:param1?/:param2?/:param3?" element={<Category />} />

2. 调整参数获取逻辑

• 路径参数（param1/param2/param3）的获取方式不变：v5可通过props.match.params读取，v6可通过useParams()钩子读取。
• 查询参数（page/datasetID等）不需要在path里定义，单独读取即可：
  • v5版本获取查询参数：

  const searchParams = new URLSearchParams(props.location.search);
  const page = searchParams.get('page');
  const datasetID = searchParams.get('datasetID');
  

  • v6版本获取查询参数：

  import { useSearchParams } from 'react-router-dom';
  // 组件内调用
  const [searchParams] = useSearchParams();
  const page = searchParams.get('page');
  const datasetID = searchParams.get('datasetID');
  

3. 其他可选排查点

• 如果是v5版本，检查前序路由是否有宽泛匹配未加exact属性，比如配置了<Route path="/" component={Home} />且放在你当前路由前面，会优先匹配根路由导致后面的路由不生效，给根路由加上exact属性即可。
• 检查你的路由是否包裹在Routes（v6）或者Switch（v5）组件内，未包裹的情况下路由匹配逻辑也会异常。

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