NextJS中如何跳过上级路由的layout布局？

这里有两种实用的实现方式，根据你的需求选择即可：

方法一：在父布局中通过路由判断控制渲染（无需修改路由结构） #

在/app/books/[name]/layout.tsx中，借助usePathname()钩子获取当前路径，判断是否为编辑页路由，若是则不渲染侧边栏：

import { usePathname } from 'next/navigation';

export default function BookLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isEditPage = pathname.endsWith('/edit');

  return (
    <div>
      {/* 仅非编辑页渲染侧边栏 */}
      {!isEditPage && <BookSidebar />}
      <main>{children}</main>
    </div>
  );
}

这种方式不用改动现有路由结构，适合快速解决问题。

方法二：调整路由结构，隔离布局作用范围 #

如果不想在布局中加入判断逻辑，可以通过调整路由结构，让edit路由不继承带侧边栏的父布局：

方案A：使用路由组 #

把需要侧边栏布局的页面放进路由组（比如/(with-sidebar)），路由组的布局仅对组内页面生效，edit路由放在组外即可：

/app
  /books
    /[name]
      /(with-sidebar)
        layout.tsx  // 带侧边栏的原布局
        page.tsx    // 书籍详情页
      /edit
        page.tsx    // 编辑页，直接继承上层的books/layout或根布局

方案B：拆分页面目录 #

将详情页放到单独的子目录（比如/view），让带侧边栏的布局仅作用于该子目录，edit路由独立出来：

/app
  /books
    /[name]
      layout.tsx  // 保留为空或仅放无侧边栏的公共内容
      /view
        layout.tsx  // 带侧边栏的布局，仅作用于详情页
        page.tsx
      /edit
        page.tsx

这种方式结构更清晰，避免了布局中的条件判断逻辑。

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