Next.js如何在/story/[slug]等动态路由下禁用Navbar组件

Next.js的router对象天然支持动态路由的路径识别，不需要解析slug参数就能完成匹配，核心判断逻辑如下：

• 对/story/[slug]这类单级动态路由，router.pathname会固定返回路由的文件系统路径/story/[slug]，和实际访问的slug参数值无关，可以直接做精确匹配
• 如果要覆盖所有/story前缀的路由（包括嵌套的动态路由，比如/story/[slug]/edit、/story/[slug]/comment/[cid]），直接用startsWith('/story')判断路径前缀即可，适配性更强，优先推荐这种写法。

你原来的代码有三个需要修正的点：

• 逻辑耦合度高，原有写法仅在/dashboard下渲染Navbar，其余页面全部隐藏，后续加新规则需要反复修改if/else判断，建议抽离统一的隐藏标识变量，后续加规则只需要改判断条件即可
• children()属于笔误，Layout组件接收的children是React节点，直接渲染即可，不需要加括号调用
• 缺少useRouter的引入和初始化调用，需要补全

代码实现 #

方案1：仅隐藏/story/[slug]单级路由 #

import { useRouter } from 'next/router'
import Navbar from '@/components/Navbar' // 替换为你项目中Navbar的实际引入路径

const Layout = ({ children }) => {
  const router = useRouter()
  // 所有需要隐藏Navbar的路径规则都在这里维护
  const shouldHideNavbar = router.pathname === '/story/[slug]'
  // 如果需要同时隐藏/dashboard，改成下面的写法即可
  // const shouldHideNavbar = ['/dashboard', '/story/[slug]'].includes(router.pathname)

  return (
    <>
      {!shouldHideNavbar && <Navbar />}
      {children}
    </>
  )
}

export default Layout

方案2：隐藏所有/story前缀的路由（推荐） #

适配所有/story下的一级、嵌套路由，后续新增/story下的子路由不需要修改判断逻辑：

import { useRouter } from 'next/router'
import Navbar from '@/components/Navbar' // 替换为你项目中Navbar的实际引入路径

const Layout = ({ children }) => {
  const router = useRouter()
  // 匹配所有/story开头的路径，同时可叠加其他路由的判断规则
  const shouldHideNavbar = router.pathname.startsWith('/story')
  // 如果需要同时隐藏/dashboard，追加判断即可
  // const shouldHideNavbar = router.pathname === '/dashboard' || router.pathname.startsWith('/story')

  return (
    <>
      {!shouldHideNavbar && <Navbar />}
      {children}
    </>
  )
}

如果你使用的是Next.js 13+ App Router模式，只需要把路由引入替换为import { usePathname } from 'next/navigation'，初始化const pathname = usePathname()后，将代码中所有router.pathname替换为pathname即可，判断逻辑完全一致。

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