[Next.js篇]一篇让小白也能看懂的「并行路由」指南

3 分钟
32 阅读
[Next.js篇]一篇让小白也能看懂的「并行路由」指南

一篇让小白也能看懂的「并行路由」指南

把“一个页面同时加载多个子页面”变成搭积木一样简单。

📌 先记住两句话

  1. 文件夹名前面加 @ → 这就是一个“槽位(slot)”。
  2. 父级 layout 里用 {@slotName} → 把槽位当成组件渲染。

🧩 什么是并行路由？

想象页面是一块 拼图板，每个 @xxx 文件夹就是一块 独立的拼图：

  • 并行加载：多个子页面同时请求、互不阻塞。
  • 独立刷新：点左侧菜单只刷新 @menu 区域，右侧 @content 不动。
  • 共享 URL：地址栏始终是 /dashboard，但内容由 3 块拼图拼成。

🎯 最小可运行例子

目录结构

复制代码 
app
└─ dashboard
   ├─ layout.js          ← 拼图底板
   ├─ @menu
   │  └─ page.js         ← 左侧菜单
   ├─ @content
   │  └─ page.js         ← 右侧主内容
   └─ page.js            ← 默认拼图组合

① 底板 layout.js

tsx 复制代码 
// app/dashboard/layout.js
export default function DashboardLayout({ menu, content }) {
  return (
    <div className="flex h-screen">
      <aside className="w-60 bg-gray-100">{menu}</aside>
      <main className="flex-1 p-4">{content}</main>
    </div>
  );
}

解构参数名 必须 与 @文件夹 同名（menu、content）。

② 左侧菜单 @menu/page.js

tsx 复制代码 
// app/dashboard/@menu/page.js
export default function Menu() {
  return (
    <ul>
      <li><a href="/dashboard">首页</a></li>
      <li><a href="/dashboard/settings">设置</a></li>
    </ul>
  );
}

③ 右侧主内容 @content/page.js

tsx 复制代码 
// app/dashboard/@content/page.js
export default function Content() {
  return <h1>欢迎进入仪表盘</h1>;
}

打开浏览器访问 /dashboard，就能看到 左侧菜单 + 右侧内容 同时加载，URL 仍保持 /dashboard。

🔄 动态切换子页面

把 @content 换成动态参数，就能实现 局部刷新：

复制代码 
app
└─ dashboard
   ├─ layout.js
   ├─ @menu
   │  └─ page.js
   ├─ @content
   │  ├─ page.js              ← /dashboard
   │  └─ [id]
   │     └─ page.js           ← /dashboard/123

点击菜单时，只有 @content 区域重新渲染，左侧 @menu 保持不动，实现 SPA 级别的无刷新体验。

🚧 常见疑问一次说清

疑问 解答
@文件夹 可以嵌套吗？ 可以，如 @modal/(..)photo/page.js 实现弹窗拦截。
并行路由会影响 SEO 吗？ 不会，服务端一次性渲染所有槽位，爬虫拿到完整 HTML。
404 怎么处理？ 对每个槽位单独写 not-found.js，如 @content/not-found.js。

🧪 高级玩法速览

玩法 目录示例 一句话说明
弹窗并行 @modal/(..)photo/page.js 访问 /photo 时弹出 modal，URL 不变。
条件渲染 layout.js 里根据路由判断是否渲染 @sidebar。
并行 + 拦截 @modal/(..)settings/page.js + @sidebar 同时存在。

✅ 速记口诀

文件夹前加 @ 就是槽位，父级 layout 用同名 prop 接收，URL 不变，子页面并行加载。

背下这一句，你就掌握了 Next.js 并行路由的全部精髓。

评论

评论

发表评论