如何实现location.pathname与指定路径的精准正则匹配？

我明白你遇到的匹配冲突问题了——之前的正则写法会让/dashboard/orders同时命中两个路径规则，这完全不符合你的预期。咱们可以通过分情况定制匹配逻辑来解决这个问题，完全满足你的需求：

核心匹配规则回顾 #

先再明确下咱们要实现的效果：

• 当目标路径是/dashboard：仅在当前路径严格等于/dashboard时返回true，任何子路径（比如/dashboard/orders或带ID的路径）都不匹配。
• 当目标路径是/dashboard/orders：当前路径是它本身，或者是它的任意子路径（比如带订单ID的/dashboard/orders/xxx）都返回true，但不能让/dashboard被误匹配。

实现方案 #

我们可以写一个通用的匹配函数，针对不同的目标路径采用不同的匹配策略：

function matchPath(targetPath, currentPathname) {
  // 处理/dashboard的精确匹配需求
  if (targetPath === '/dashboard') {
    return currentPathname === '/dashboard';
  }

  // 处理/dashboard/orders的自身+子路径匹配需求
  // 正则解释：
  // ^ 匹配字符串开头
  // ${targetPath} 匹配目标路径本身
  // (/.*)? 可选的子路径部分：/ 开头，后面跟任意字符（.*），?表示这部分可以不存在
  if (targetPath === '/dashboard/orders') {
    const matcher = new RegExp(`^${targetPath}(/.*)?$`);
    return matcher.test(currentPathname);
  }

  // 如果以后有其他路径需求，可以在这里扩展
  return false;
}

测试验证 #

咱们来逐个验证所有场景：

当targetPath为/dashboard时： #

• matchPath('/dashboard', '/dashboard') → true（符合预期）
• matchPath('/dashboard', '/dashboard/orders') → false（符合预期）
• matchPath('/dashboard', '/dashboard/orders/5ea5c95684c28d4b7ff688e1') → false（符合预期）

当targetPath为/dashboard/orders时： #

• matchPath('/dashboard/orders', '/dashboard/orders') → true（符合预期）
• matchPath('/dashboard/orders', '/dashboard/orders/5ea5c95684c28d4b7ff688e1') → true（符合预期）
• matchPath('/dashboard/orders', '/dashboard/orders/anyOtherId') → true（符合预期）
• matchPath('/dashboard/orders', '/dashboard') → false（符合预期）

为什么之前的写法有问题？ #

你之前用new RegExp(${path}/*)生成的正则，比如当path是/dashboard时，正则是/dashboard/*——这里的*在正则里是匹配前面的字符（也就是/）零次或多次，所以/dashboard/orders的开头/dashboard/会被这个正则匹配，导致/dashboard/orders同时命中/dashboard的规则，这就是冲突的根源。

通过分情况处理，我们给/dashboard用精确字符串匹配，给/dashboard/orders用开头匹配+可选子路径的正则，就完美解决了这个问题。

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