笙亿网络策划

Next.js 并行路由 Parallel Routing 怎么用？

约 6 分钟读完 44 阅
文章导读
Previous Quiz Next 并行路由 Parallel Routing 是一种路由方法，通过它你可以在同一个 layout 中同时且有条件地渲染一个或多个页面。这种方法适用于应用的动态部分，例如社交网站的仪表板和动态 feed。
📋 目录
  1. A 并行路由
  2. B 如何设置并行路由
  3. C 并行路由示例
A A

Next.js - 并行路由

Previous
Quiz
Next

并行路由

Parallel Routing 是一种路由方法，通过它你可以在同一个 layout 中同时且有条件地渲染一个或多个页面。这种方法适用于应用的动态部分，例如社交网站的仪表板和动态 feed。

示例用例

想象一下，你需要创建一个社交媒体网站，用户可以在其中查看他们的 feed 和个人资料。feed 显示在屏幕左侧，个人资料显示在屏幕右侧。以下目录结构展示了该社交媒体网站的并行路由。

app/
  layout.tsx
  page.tsx
  @sidebar/
      layout.tsx
      page.tsx
  @content/
      layout.tsx
      page.tsx

如何设置并行路由

要设置并行路由，请按照以下步骤操作：

步骤 1: 启用 App Router

Parallel routing 仅在 Next.js App Router 中受支持。因此，请确保你的 Next.js 项目使用 Next.js 13 或更高版本，并启用了 App Router。查看如何启用 App Router。

步骤 2: 创建命名插槽

并行路由使用命名插槽创建。插槽使用 @folder 约定定义。例如，以下文件结构定义了两个插槽：@sidebar 和 @content。

app/
  layout.tsx
  page.tsx
  @sidebar/
      layout.tsx
      page.tsx
  @content/
      layout.tsx
      page.tsx

步骤 3: 定义布局文件

现在，我们需要定义根布局文件。根布局文件是应用中所有页面将使用的布局。它定义在 app/layout.tsx 文件中。

// 文件: app/layout.tsx

export default function RootLayout({
        children, sidebar, content,
    }: {
        children: React.ReactNode;
        sidebar: React.ReactNode;
        content: React.ReactNode;
    }) {
    return (
      <html lang="en">
        <body>
          <div style={{ display: "flex" }}>
            <aside style={{ width: "20%", background: "#f4f4f4" }}>
              {sidebar} {/* 侧边栏插槽 */}
            </aside>
            <main style={{ width: "80%" }}>
              {content} {/* 主要内容插槽 */}
            </main>
          </div>
        </body>
      </html>
    );
}

步骤 4: 创建并行路由段

设置根布局后，我们可以开始创建单独的并行路由段。每个并行路由段都定义在以 @folder 约定的文件夹中。

// 文件: @sidebar/page.tsx

export default function Sidebar() {
  return <nav>Sidebar Content</nav>;
}

// 文件: @content/page.tsx

export default function Content() {
  return <section>
Main Content
</section>;
}

步骤 5: 定义默认页面

最后，我们需要定义默认首页。这是用户访问应用根 URL 时将渲染的页面。

// 文件: app/page.tsx

export default function Home() {
    return <h1>Welcome to My Page</h1>;
}

并行路由示例

在下面的示例中，我们将为一个社交媒体网站创建一个并行路由。该网站将有一个侧边栏用于显示用户的动态 feed，以及一个主内容区域用于显示用户的个人资料。侧边栏将显示在屏幕左侧，主内容区域将显示在屏幕右侧。



export default function Sidebar() {
  return <nav>Sidebar Content</nav>;
}

// File: @content/page.tsx

export default function Content() {
  return <section>
Main Content
</section>;
}

// File: app/layout.tsx

export default function RootLayout({
    children,
    sidebar,
    content,
}: {
    children: React.ReactNode;
    sidebar: React.ReactNode;
    content: React.ReactNode;
}) {
    return (
        <html lang="en">
        <body>
            <div style={{ display: "flex" }}>
            <aside style={{ width: "20%", background: "#f4f4f4", padding: "10px" }}>
                {sidebar} {/* 侧边栏插槽 */}
            </aside>
            <main style={{ width: "80%", fontWeight: "bold" }}>
                {content} {/* 主内容插槽 */}
            </main>
            </div>
        </body>
        </html>
    );
}

输出效果

在输出效果中，我们可以看到侧边栏和主内容并排显示。

Next Js Parallel Routing