如何为React JS路由编写匹配指定格式路径的正确正则表达式

我来帮你搞定这个路由匹配的问题！你之前的写法之所以会匹配/articles/-3这类不符合要求的URL，是因为没有限制page-前缀和数字的绑定关系，也没约束参数必须是纯数字。下面给你两种靠谱的实现方式：

方式一：单路由匹配（带可选参数正则） #

如果想用单个路由覆盖两种情况（根路径和分页路径），可以在React Router v6里这样写：

<Route path="/articles/:pageSegment(page-\\d+)?" element={<ArticlesComponent />} />

细节解释： #

• :pageSegment是自定义的参数名，你可以改成pagePath之类的，方便后续在组件里用useParams()获取
• (page-\\d+)是核心的正则规则：
  • page-是固定前缀，必须完整出现才能匹配分页路径
  • \\d+表示匹配一个或多个数字（注意JS字符串里反斜杠要转义，所以写两个）
• 末尾的?表示这个参数是可选的，所以同时兼容/articles（或/articles/，React Router会自动处理末尾斜杠）和/articles/page-1这类路径

方式二：拆分路由（更清晰直观） #

如果觉得单路由的正则有点绕，也可以拆成两个独立的路由，这样逻辑更明确，还能直接拿到分页数字：

// 匹配文章列表根路径
<Route path="/articles" element={<ArticlesComponent />} />
// 匹配分页路径，直接捕获页码数字
<Route path="/articles/page-:pageNumber(\\d+)" element={<ArticlesComponent />} />

这种写法的好处是，在组件里通过useParams()可以直接获取pageNumber（比如page-2对应的pageNumber就是"2"），不用再额外处理参数字符串。

为什么你之前的写法不行？ #

你之前的/articles/(page-)?:pageNumber?存在两个关键问题：

• (page-)?:pageNumber?意味着page-前缀和pageNumber都是可选的，所以当URL是/articles/-3时，page-部分为空，pageNumber被识别为-3，就会被错误匹配
• 没有对pageNumber做数字约束，它会匹配任意字符（包括字母、符号），不符合你的需求

验证效果 #

这两种写法都会正确匹配以下路径：

• /articles
• /articles/
• /articles/page-1
• /articles/page-123

同时会拒绝匹配这些不符合要求的URL：

• /articles/-3
• /articles/page（缺少数字）
• /articles/page-abc（非数字后缀）
• /articles/other（无关路径）

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