React Router v6.4.1如何给动态路由参数添加固定字符串结尾

方法一：参数正则约束（推荐） #

React Router v6支持在动态路径参数里添加正则表达式，精准匹配特定格式的路径。你可以通过正则让productSlug匹配到-product之前的所有内容，路由定义如下：

<Route path=":productSlug(.*)-product" element={<ProductDetails />} />

当路径为/shaver-900-product时，路由会正确匹配，通过useParams()获取到的productSlug值就是shaver-900，直接用来请求API即可：

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

function ProductDetails() {
  const { productSlug } = useParams();
  // 直接用productSlug调用API
  // fetch(`/api/products/${productSlug}`)
  return <div>Product Details for {productSlug}</div>;
}

如果产品slug本身包含横杠（比如/electric-shaver-900-product），这个正则依然能正确提取出electric-shaver-900，因为(.*)会匹配到-product之前的所有字符。

方法二：组件内手动截取后缀 #

如果不想用正则约束，也可以保留简单的动态路由，在组件内手动去掉-product后缀：

<Route path=":productSlug" element={<ProductDetails />} />

然后在组件中处理参数：

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

function ProductDetails() {
  const { productSlug } = useParams();
  // 仅截取结尾为"-product"的部分，避免影响其他路由
  const actualSlug = productSlug.replace(/-product$/, '');
  // 使用actualSlug请求API
  return <div>Product Details for {actualSlug}</div>;
}

这种方法需要注意：如果有其他路由也使用:productSlug参数，可能会被误处理，所以更推荐第一种路由层面的精准匹配方案。

注意事项 #

• 路由顺序要正确：把这个动态路由放在静态路由（比如/products、/about）之后，避免静态路由被动态路由提前匹配。
• 测试边界场景：比如slug为空、包含特殊字符的情况，确保逻辑能正常处理。

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