NextJS 路由器使用嵌套页面不设置活动菜单答案

【问题标题】：NextJS router using nested pages not setting active menuNextJS 路由器使用嵌套页面不设置活动菜单
【发布时间】：2023-02-05 19:50:26
【问题描述】：

我正在使用 NextJS，我正在尝试使用路由器设置活动菜单项。所有“顶级”页面都可以正常工作，但如果顶级页面下有一个页面，则不会设置活动页面。

router.pathname == "/profile" ? "active" : "not active"

上面的代码为 /profile 设置了活动状态，但是如果例如我有一个页面是 /profile/23543456，那么它将设置为不活动状态

有没有办法解决这个问题，以便配置文件的任何子页面也设置为活动状态？

【问题讨论】：

【解决方案1】：

路径名字段包含完整的路由路径。所以在你的例子中，router.pathname是/profile/23543456。您可以检查路径名是否以 /profile/ 开头。

router.pathname.startsWith('/profile/') ? "active" : "not active"

【讨论】：