如何在Next.js App Router中实现类似React Router Outlet的页面内嵌渲染？

核心思路：用基础嵌套路由实现 #

你的需求其实是最常见的布局嵌套+子路由切换场景，完全不用碰Parallel/Intercepting Routes这种复杂概念，按下面步骤来就行：

1. 搭建嵌套路由目录结构 #

以Next.js为例，按下面的目录组织文件，让仪表盘布局自动包裹所有子页面：

app/
  dashboard/
    layout.js  # 仪表盘公共布局（侧边栏、顶部导航等固定元素）
    page.js    # 仪表盘默认首页内容
    sales/
      page.js  # 销售页面的具体内容
    customers/
      page.js  # 客户页面的具体内容

2. 编写仪表盘布局组件 #

在layout.js里定义好固定布局，用{children}占位子页面的内容：

import Link from 'next/link';

export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard-wrapper">
      {/* 侧边导航栏 */}
      <nav className="sidebar">
        <Link href="/dashboard/sales">销售</Link>
        <Link href="/dashboard/customers">客户</Link>
      </nav>
      {/* 内容展示区，子页面会渲染在这里 */}
      <div className="content">
        {children}
      </div>
    </div>
  );
}

3. 编写子页面内容 #

sales/page.js和customers/page.js只需要写各自的业务内容就行，比如：

// sales/page.js
export default function SalesPage() {
  return <div>销售数据统计、订单列表...</div>;
}

这样点击侧边栏的“销售”或“客户”链接时，页面不会刷新，只会替换content区域里的内容，仪表盘的布局始终保持不变。

关于Parallel/Intercepting Routes的说明 #

这俩特性是用来解决更复杂的路由场景，和你的需求不沾边：

• 并行路由：需要同时展示多个独立的路由内容（比如左侧是邮件列表，右侧是当前打开的邮件，两个路由同时处于活跃状态）
• 拦截路由：需要拦截某个路由跳转，替换成另一个组件展示（比如点击列表项时，在当前页面弹出详情弹窗，而不是跳转到详情页）

你的需求就是普通的子路由切换，用基础嵌套路由完全能搞定，没必要去啃复杂概念。

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