Next.js中如何像React Outlet一样嵌套子组件？

一、首页About无路由渲染（不切换页面） #

不需要依赖路由，直接用React状态控制内容切换即可：

• 在首页组件里维护一个状态，比如activeSection，默认指向首页内容
• Navbar的About按钮点击时更新状态，根据状态渲染对应内容块

代码示例：

// app/page.js
'use client';
import { useState } from 'react';
import Navbar from './components/Navbar';
import AboutContent from './components/AboutContent';

export default function Home() {
  const [activeSection, setActiveSection] = useState('home');

  return (
    <div>
      <Navbar 
        onNavClick={(section) => setActiveSection(section)} 
        activeSection={activeSection}
      />
      <main>
        {activeSection === 'home' && <div>首页核心内容</div>}
        {activeSection === 'about' && <AboutContent />}
      </main>
    </div>
  );
}

Navbar组件中处理About按钮和路由跳转：

// app/components/Navbar.js
import Link from 'next/link';

export default function Navbar({ onNavClick, activeSection }) {
  return (
    <nav>
      <button 
        onClick={() => onNavClick('home')}
        className={activeSection === 'home' ? 'active' : ''}
      >首页</button>
      <button 
        onClick={() => onNavClick('about')}
        className={activeSection === 'about' ? 'active' : ''}
      >About</button>
      <Link 
        href="/projects" 
        className={activeSection === 'projects' ? 'active' : ''}
      >Projects</Link>
      <Link 
        href="/blogs" 
        className={activeSection === 'blogs' ? 'active' : ''}
      >Blogs</Link>
    </nav>
  );
}

二、Projects和Blogs使用独立Navbar（路由级布局） #

Next.js App Router支持路由目录专属布局，直接在对应路由目录下创建layout.js即可覆盖根布局：

1. 根布局（app/layout.js）只保留全局容器和样式，不写Navbar
2. 在app/projects目录下创建layout.js，引入Projects专属Navbar
3. 在app/blogs目录下创建layout.js，引入Blogs专属Navbar

示例：
根布局：

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

Projects专属布局：

// app/projects/layout.js
import ProjectsNavbar from '../components/ProjectsNavbar';

export default function ProjectsLayout({ children }) {
  return (
    <div>
      <ProjectsNavbar />
      <main>{children}</main>
    </div>
  );
}

Blogs专属布局同理，只需替换Navbar组件即可。

三、Blog页面侧边栏嵌套（类似Outlet效果） #

利用App Router的布局嵌套能力，在Blog布局中放置侧边栏，children就相当于React Router的Outlet，自动渲染子路由内容：

1. 创建app/blogs/layout.js，包含侧边栏和内容区域
2. 在blogs目录下创建子路由（如blogs/post-1、blogs/post-2），这些页面会自动渲染到布局的内容区域

示例：
Blogs布局：

// app/blogs/layout.js
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function BlogsLayout({ children }) {
  const pathname = usePathname();
  const blogPosts = [
    { slug: 'post-1', title: 'React状态管理实战' },
    { slug: 'post-2', title: 'Next.js App Router深度解析' }
  ];

  return (
    <div style={{ display: 'flex' }}>
      {/* 侧边栏 */}
      <aside style={{ width: '220px', padding: '1.5rem', borderRight: '1px solid #e5e7eb' }}>
        <h3>博客列表</h3>
        <ul className="space-y-2 mt-3">
          {blogPosts.map(post => (
            <li key={post.slug}>
              <Link 
                href={`/blogs/${post.slug}`}
                style={{ 
                  color: pathname === `/blogs/${post.slug}` ? '#2563eb' : 'inherit',
                  textDecoration: pathname === `/blogs/${post.slug}` ? 'underline' : 'none',
                  display: 'block',
                  padding: '0.5rem'
                }}
              >
                {post.title}
              </Link>
            </li>
          ))}
        </ul>
      </aside>
      {/* 内容区域 */}
      <main style={{ flex: 1, padding: '1.5rem' }}>
        {children}
      </main>
    </div>
  );
}

子页面示例：

// app/blogs/post-1/page.js
export default function Post1() {
  return (
    <article>
      <h1>React状态管理实战</h1>
      <p>这里是第一篇博客的具体内容...</p>
    </article>
  );
}

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