React Router路由正则：JS中实现两字符间非包含匹配的方法

首先得纠正一下你原来的路由写法，React Router里参数和正则的正确格式是:paramName(正则表达式)，你之前的写法存在语法错误哦。

回到你的需求：要从https://mywebsite.com/p/foo-bar-fizz-buzz-myid1234这样的URL里，抓取p/之后到最后一个连字符（包含这个连字符）的内容，也就是foo-bar-fizz-buzz-这部分。虽然JavaScript早年不支持后行环视，但它支持先行断言，我们可以利用这个特性来实现，或者用更稳妥的多参数方案。

方案一：利用先行断言（推荐） #

先行断言可以帮我们确保匹配到的最后一个连字符后面确实跟着无连字符的ID部分，同时不会把ID包含到我们要提取的参数里。对应的路由路径写法如下：

// React Router v5
<Route path="/p/:myId(.*-(?=[^-]+$))" component={MyComponent} />

// React Router v6
<Route path="/p/:myId(.*-(?=[^-]+$))" element={<MyComponent />} />

这个正则的逻辑拆解：

• .*-：贪婪匹配任意字符直到最后一个连字符（包含该连字符）
• (?=[^-]+$)：先行断言，检查后面的内容是一个或多个非连字符的字符且直到URL结尾，确保整个URL能被路由正确匹配

在组件里获取参数的方式：

// React Router v5
function MyComponent({ match }) {
  console.log(match.params.myId); // 输出 "foo-bar-fizz-buzz-"
  return <div>你的组件内容</div>;
}

// React Router v6
import { useParams } from 'react-router-dom';

function MyComponent() {
  const { myId } = useParams();
  console.log(myId); // 输出 "foo-bar-fizz-buzz-"
  return <div>你的组件内容</div>;
}

方案二：添加额外参数兼容旧环境 #

如果你担心某些环境对先行断言的支持问题，可以添加一个额外的参数来匹配最后的ID部分——虽然我们不需要这个参数，但它能确保整个URL被正确匹配：

// React Router v5
<Route path="/p/:myId(.*-):id([^-]+)" component={MyComponent} />

// React Router v6
<Route path="/p/:myId(.*-):id([^-]+)" element={<MyComponent />} />

这里的:id([^-]+)会匹配最后无连字符的ID部分，而:myId(.*-)依然会抓取到我们需要的foo-bar-fizz-buzz-，在组件里直接忽略id参数即可。

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