NextJS动态路由下如何为父导航项保留active类

你只需要修改NavItem.tsx中判断active类的逻辑，从精准匹配路由slug改成检查当前完整路径是否以父导航的路径开头即可。

修改后的NavItem.tsx代码： #

import Link from "next/link"
import { useRouter } from "next/router"

const NavItem = ({navitem}) => {
   const router = useRouter()
   // 基础判断逻辑：匹配父路由及所有子路由
   const isActive = router.asPath.startsWith(`/${navitem.url.slug}`) 
   // 针对首页的特殊处理（如果你的首页slug为空）
   // const isActive = navitem.url.slug === "" 
   //   ? router.asPath === "/" 
   //   : router.asPath.startsWith(`/${navitem.url.slug}`)

   return (
     <div>
        <Link href={"/" + navitem.url.slug} 
              className={`${isActive ? "active" : ""}`}>
          {navitem.title}
       </Link>
    </div>
  )
}

export default NavItem

原理说明： #

• router.asPath会返回当前页面的完整路径（比如/about/employees），而非仅动态路由的单个slug参数。
• 用startsWith判断当前路径是否以父导航的路径（/about）开头，就能识别所有属于该父路由的子页面，自动给父导航加上active类。
• 如果导航包含首页（slug为空字符串），可以启用注释里的逻辑单独处理，避免所有页面都错误高亮首页。

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