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

Question

I am using NextJS and i am trying to set active menu items using the router. All 'top level' pages works fine, but if there is a page under the top level page, it does not set the active page.

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

The code above sets active for /profile but if for instance i have a page that is /profile/23543456 , then it sets to not active

Is there a way to sort this out so that any sub pages of the profile also set active?

Answer 1

Pathname field contains full route path. So in your case, router.pathname is /profile/23543456 . You can check if the pathname starts with /profile/ instead.

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