JavaScript URLPattern 如何匹配嵌套路由：groups、test 与降级边界

前端路由表一旦出现三层路径，直接堆正则很快就会变成一串难以维护的捕获组。JavaScript 的 URLPattern 可以把路径结构写成 /:space/:project/:page，先用 test() 判断请求是否属于这条路由，再从 pathname.groups 读取参数；不支持该 API 的浏览器则保留原有路由器作为回退。

把 URLPattern 当成“路由筛选器”使用：test 只负责命中判断，groups 负责取出命名参数；生产代码必须加特性检测，不能把新 API 当成唯一入口。

先用 URLPattern 把路径命中和参数提取拆开

假设页面路由是工作区、项目、页面三级结构：/acme/portal/settings。模式可以只描述 pathname，不必把协议、域名和查询串一起写进来。

const route = new URLPattern({
  pathname: "/:space/:project/:page"
});

const url = "/acme/portal/settings";
if (route.test({ pathname: url })) {
  const matched = route.exec({ pathname: url });
  const { space, project, page } = matched.pathname.groups;
  console.log(space, project, page);
}

这里的调用顺序很重要。test() 只回答“是否匹配”，返回 false 时不要继续访问 matched.pathname.groups；确认命中后再用匹配结果读取 groups。命名组的好处是参数名直接表达业务含义，不用维护“第几个捕获组”这样的隐式约定。

如果只想识别一条路由而不需要参数，保留 test() 就够了。需要渲染工作区、项目和页面时，再进入 pathname.groups，这能让分流逻辑和参数消费各自保持简单。

嵌套路由的边界要在模式里写清楚

URLPattern 的组修饰符会改变可接受的路径数量。/:page? 允许页面段缺省，/:page+ 要求至少一段，/:page* 则允许零段或多段。它们不是“更宽松的正则写法”，而是路由契约的一部分。

最容易漏掉的是结尾斜杠。不要因为开发环境的服务器自动重定向，就默认 /acme/portal、/acme/portal/ 和 /acme/portal/settings 是同一个输入；先在测试集合中把三种字符串分别跑过 test()，再决定是否在进入 URLPattern 前统一化路径。

用特性检测保留旧浏览器回退

URLPattern 是浏览器平台能力，不能假设所有访问者都能直接构造它。入口处先检查 "URLPattern" in window：能力存在时走上面的命名组路由；能力不存在时交给项目已有的路由器或服务端渲染，不要在异常处理里吞掉路径参数。

function matchRoute(pathname) {
  if ("URLPattern" in window) {
    const route = new URLPattern({ pathname: "/:space/:project/:page" });
    if (!route.test({ pathname })) return null;
    return route.exec({ pathname }).pathname.groups;
  }

  return legacyRouter.match(pathname); // 回退
}

回退分支要和新分支返回同一种数据形状，例如都返回 { space, project, page } 或都返回 null。这样渲染层不必知道当前是 URLPattern 还是旧路由器，测试也能直接对比两条路径的结果。

常见问题

URLPattern 的 test 和 exec 应该怎么选？

只需要判断命中与否时用 test()；需要读取 pathname、groups 等匹配详情时，先 test 再读取 exec() 的结果。

为什么 test 返回 false 后不能继续读 groups？

因为没有命中就没有可供消费的匹配结果。先判断布尔值可以把“不匹配”作为正常分支处理，避免把空结果当成对象使用。

可选参数应该用问号还是让路由器兜底？

如果缺省参数仍属于同一条业务路由，可以用 ? 并明确缺省时的页面状态；如果缺省意味着完全不同的入口，让上层路由分流通常更清楚。

发布前的最小验收清单

• 用完整路径、缺少最后一段、结尾斜杠三组输入分别验证 test()。
• 命中后核对 pathname.groups.space、project、page 的值，不只检查页面“看起来打开了”。
• 在不支持 URLPattern 的环境确认回退仍返回同样的数据形状。
• 把路径规范化、可选组和重复组写成测试用例，避免服务器重定向掩盖边界差异。

URLPattern 的价值不在于替换所有路由库，而在于把 URL 的结构匹配变成浏览器原生、可读的规则。先把 test、groups 和回退边界分开验证，再决定是否把它扩展到整套路由表，维护成本会低很多。