React Router useParams参数合并异常及面包屑URL参数过滤问题

一、useParams返回合并参数的原因 #

你的主路由配置中，/branch/:branchCode/dispatch/* 使用了通配符路由（*），React Router 中，通配符*会匹配该路径之后的所有剩余路径片段，并将这部分内容存入useParams()返回对象的*属性中。

而 Dispatch 路由里的 LogsServiceProvider 下的路由使用了绝对路径：

<Route path="/branch/:branchCode/dispatch/:trainNumber/dockets/:docketId/logs" element={...} />

这个路由嵌套在/branch/:branchCode/dispatch/*的子路由层级中，但绝对路径会绕过父路由的相对匹配规则，导致父路由的通配符*依然捕获了dispatch/之后的全部路径（即XX920230328/dockets/6438a6fb794e8f3482f4557c/logs），同时主路由的:branchCode参数正常解析，最终useParams()返回的对象就包含了*和branchCode两个属性。

二、修复方案 #

1. 修正Dispatch路由的路径为相对路径 #

将LogsServiceProvider中的路由路径改为相对路径，因为它已经嵌套在/branch/:branchCode/dispatch/*之下，无需重复写完整绝对路径：

// 修改前（绝对路径）
<Route path="/branch/:branchCode/dispatch/:trainNumber/dockets/:docketId/logs" element={...} />

// 修改后（相对路径）
<Route path="/:trainNumber/dockets/:docketId/logs" element={...} />

修改后，父路由的通配符*只会匹配到:trainNumber起始的路径，子路由会正确解析trainNumber、docketId等独立参数，useParams()将返回branchCode、trainNumber、docketId等单独属性，不会再出现合并的*字段。

2. 面包屑去除URL参数的处理 #

navigate(-1)会默认保留当前URL的搜索参数，要实现面包屑跳转时不带参数，可通过以下方式处理：

方式1：手动构建不带搜索参数的父路径跳转

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

const navigate = useNavigate();
const { pathname } = useLocation();

const goToParentPath = () => {
  // 截取当前路径的上一级路径（不含搜索参数）
  const parentPath = pathname.substring(0, pathname.lastIndexOf('/'));
  navigate(parentPath);
};

方式2：直接跳转面包屑对应的固定路由路径

如果面包屑的层级是固定的，直接跳转不带参数的目标路由即可：

navigate('/branch/KAW/dispatch'); // 替换为实际目标路径

三、额外建议 #

• 嵌套路由优先使用相对路径，避免绝对路径引发的路由匹配冲突；
• 通配符路由（*）尽量放在路由层级的最末端，避免提前捕获后续路径片段；
• 若需自定义解析路径参数，可结合useLocation().pathname手动拆分路径片段。

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