Reactjs 当URL参数也包含在路由中时，如何使用路由实现选项卡？

我遵循了这个非常简单的示例，介绍了如何使用路由实现选项卡：

问题是，我的路由有url参数，所以我不能使用

match.path

，否则我最终会得到无法解析的url参数（

/：userId/comments/

），所以我决定改用

location.pathname

，但这有它自己的问题。例如，如果我导航到“联系人”选项卡，然后导航到“评论”并返回到“联系人”，则我的URL将如下所示：

/USERID-13984123/contact/comments/contact

。将原始

location.pathname

存储在状态会导致在导航离开页面后使用反向导航时出现类似问题

react路由器是否提供任何现成的方法来解决此问题

---

更新：我写了一个算法，它接受

匹配.path

，并返回一个新的路径字符串，url参数已解决，这解决了问题，但它似乎有点黑客，所以我仍然愿意接受建议。

检查路径的最后一部分是否有效？我最近在一个项目中处理了一个类似的问题，并以这种方式进行了处理。我确实想到了这一点，但对我来说效果不太好，因为我的路径的前一部分是用户定义的ID。我认为解决这一问题会导致比我当前的解决方案更多的黑客行为。我知道，如果您还没有使用

NavLink

，您可以从

react router dom

为选项卡使用

NavLink

。