React Router 路径参数以斜杠开头匹配失效问题咨询

问题根因：React Router 中 :id+ 匹配规则会将路径按斜杠拆分后拼接参数，自动合并连续斜杠，因此参数前置的斜杠会被识别为路径分隔符吞掉，最终导致参数取值错误。

• 方案1：改用通配符全匹配（兼容v5/v6版本）
  通配符*会完整捕获匹配位置后的所有原始路径内容，不会自动合并斜杠，也不会按路径段拆分，可直接拿到带前置斜杠的完整参数。
  v5 版本代码示例：

<Route exact path="/admin/user/detail/*" render={(props) => {
  const id = props.match.params['*'];
  // 可直接获取到 "/eytgsheyeh"、"gysyts/hjdjd" 等完整参数
}} />

v6 版本代码示例：

// 路由配置
<Route path="/admin/user/detail/*" element={<UserDetail />} />

// 业务组件内取值
import { useParams } from 'react-router-dom';
function UserDetail() {
  const { '*': id } = useParams();
  // 处理业务逻辑
}

• 方案2：参数编码规避特殊字符冲突
  如果无需保留URL原始格式，可在拼接跳转路径时对id参数做URI编码，避免参数中的斜杠和路径分隔符混淆，无需修改原有路由配置：

// 跳转前编码参数
const encodedId = encodeURIComponent(rawId);
const targetUrl = `/admin/user/detail/${encodedId}`;

// 取参数时解码
const id = decodeURIComponent(match.params.id);

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