如何在React Router嵌套路由中使用useParams获取含斜杠的完整ID

问题根因 #

默认React Router的动态参数规则:参数名仅匹配单一路由片段（两个相邻斜杠之间的内容），遇到斜杠就会终止匹配，所以你只能拿到ID的第一段前缀。不需要使用useRouteMatch，仅需修改两处配置即可解决问题。

解决方案 #

1. 修改路由匹配规则 #

给动态参数id添加+修饰符，让它可以匹配包含斜杠的多段路径：

// 修改前
<Route path="/view/:id" component={SingleProduct} />

// 修改后
<Route path="/view/:id+" component={SingleProduct} />

说明：+修饰符表示该参数需要匹配1个或多个路径片段，会把/view/之后的所有内容（无论包含多少个斜杠）都作为id的参数值返回。
如果你使用的是React Router v6版本，路由写法调整为：

<Route path="/view/:id+" element={<SingleProduct />} />

2. 修正Link跳转路径 #

你当前的Link跳转直接使用product.id，会生成/electronics/2020/product1这类路径，无法匹配/view/开头的路由规则，需要补全路径前缀：

state.map(product => <Link to={`/view/${product.id}`}>{product.title}</Link>);

修改完成后，在SingleProduct组件中直接调用useParams()即可拿到完整的带斜杠的ID：

import { useParams } from 'react-router-dom';

function SingleProduct() {
  const { id } = useParams(); // 此时id为完整值：electronics/2020/product1
  // 后续业务逻辑
}

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