Next.js路由组无法跳过根布局报错求助

问题分析 #

你误解了Route Groups的作用：它只是用来组织路由结构，不会让内部布局脱离根布局（app/layout.tsx）。根布局是所有路由的最外层容器，所有页面都会被它包裹。你在(wikirocket)/layout.tsx里重复写<html>和<body>标签，导致页面出现多个根节点，这就是报错的直接原因；而短暂显示根导航栏，是因为原根布局包含导航栏，(wikirocket)路由初始仍会被它包裹渲染。

正确解决方案 #

要实现(wikirocket)完全不加载根布局的导航栏，需要拆分布局结构，把需要导航栏的路由单独放到一个Route Group中：

1. 修改根布局（app/layout.tsx） #

移除导航栏，只保留最基础的全局容器：

import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

2. 创建带导航栏的路由组(main) #

• 新建app/(main)目录，把原有的page.tsx（首页）、about/、users/全部移入该目录。
• 在app/(main)/layout.tsx中添加导航栏：

import Link from 'next/link'

export default function MainLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <nav className='navbar'>
        <h1><Link href={'/'}>Home</Link></h1>
        <h1><Link href={'/wikirocket'}>WikiRocket</Link></h1>
        <h3><Link href={'/about'}>About</Link></h3>
        <h3><Link href={'/users'}>Users</Link></h3>
      </nav>
      {children}
    </>
  )
}

3. 修正(wikirocket)/layout.tsx #

移除<html>和<body>标签（根布局已提供），同时修正组件路径：

import Navbar from './components/Navbar'

export const metadata = {
  title: 'WikiRocket',
  description: 'Generated by create next app',
}

export default function WikiRocketLayout({children}: {
  children: React.ReactNode
}) {
  return (
    <>
      <Navbar />
      {children}
    </>
  )
}

效果验证 #

调整后：

• 访问/、/about、/users时，会加载(main)布局的导航栏；
• 访问/wikirocket时，只会加载自身布局的导航栏，完全不会显示根布局的导航栏，也不会再出现报错。

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