跳到主要内容

Next.js 平行路由

Next.js 是一个功能强大的 React 框架，提供了许多高级路由功能，其中之一就是平行路由。平行路由允许你在同一页面中同时渲染多个独立的路由内容。这对于构建复杂的用户界面非常有用，例如仪表盘、多标签页或分屏布局。

什么是平行路由？​

平行路由是指在同一页面中同时渲染多个路由内容的能力。这些路由内容可以独立加载和更新，而不会影响其他路由内容。平行路由的核心思想是将页面划分为多个独立的部分，每个部分都可以有自己的路由逻辑。

平行路由的应用场景​

  • 仪表盘：在仪表盘中，你可能需要同时显示多个小部件或模块，每个模块都可以独立加载和更新。
  • 分屏布局：在分屏布局中，你可能需要同时显示两个或多个独立的内容区域，每个区域都可以有自己的路由逻辑。
  • 多标签页：在多标签页应用中，每个标签页可以是一个独立的路由内容，用户可以快速切换标签页而不需要重新加载整个页面。

如何在 Next.js 中实现平行路由？​

在 Next.js 中，你可以通过使用 @ 符号来定义平行路由。以下是一个简单的示例，展示了如何在同一个页面中同时渲染两个独立的路由内容。

示例：平行路由的基本用法​

假设我们有一个页面 /dashboard，我们希望在页面中同时显示两个独立的内容区域：/dashboard/analytics 和 /dashboard/settings。

  1. 创建平行路由文件夹结构

    首先，在 pages 目录下创建一个 dashboard 文件夹，并在其中创建两个子文件夹：@analytics 和 @settings。

    pages/
    ├── dashboard/
    │   ├── @analytics/
    │   │   └── index.js
    │   ├── @settings/
    │   │   └── index.js
    │   └── index.js

  2. 编写平行路由组件

    在 @analytics/index.js 中编写以下代码：

    jsx
    export default function Analytics() {
      return <div>Analytics Content</div>;
    }

    在 @settings/index.js 中编写以下代码：

    jsx
    export default function Settings() {
      return <div>Settings Content</div>;
    }

  3. 在主页面中渲染平行路由

    在 dashboard/index.js 中编写以下代码：

    jsx
    import Analytics from './@analytics';
    import Settings from './@settings';

    export default function Dashboard() {
      return (
        <div>
          <h1>Dashboard</h1>
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1 }}>
              <Analytics />
            </div>
            <div style={{ flex: 1 }}>
              <Settings />
            </div>
          </div>
        </div>
      );
    }

    在这个示例中，Analytics 和 Settings 是两个平行路由，它们在同一页面中同时渲染。

示例输出​

当你访问 /dashboard 时，页面将显示以下内容：

Dashboard
---------------------------------
| Analytics Content | Settings Content |
---------------------------------

平行路由的高级用法​

动态平行路由​

你可以使用动态路由参数来实现更灵活的平行路由。例如，假设你有一个用户仪表盘，每个用户都有自己的分析页面和设置页面。

  1. 创建动态平行路由文件夹结构

    pages/
    ├── dashboard/
    │   ├── [userId]/
    │   │   ├── @analytics/
    │   │   │   └── index.js
    │   │   ├── @settings/
    │   │   │   └── index.js
    │   │   └── index.js

  2. 编写动态平行路由组件

    在 @analytics/index.js 中编写以下代码：

    jsx
    export default function Analytics({ userId }) {
      return <div>Analytics Content for User {userId}</div>;
    }

    在 @settings/index.js 中编写以下代码：

    jsx
    export default function Settings({ userId }) {
      return <div>Settings Content for User {userId}</div>;
    }

  3. 在主页面中渲染动态平行路由

    在 [userId]/index.js 中编写以下代码：

    jsx
    import Analytics from './@analytics';
    import Settings from './@settings';

    export default function Dashboard({ userId }) {
      return (
        <div>
          <h1>Dashboard for User {userId}</h1>
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1 }}>
              <Analytics userId={userId} />
            </div>
            <div style={{ flex: 1 }}>
              <Settings userId={userId} />
            </div>
          </div>
        </div>
      );
    }

    export async function getServerSideProps(context) {
      const { userId } = context.params;
      return {
        props: {
          userId,
        },
      };
    }

    在这个示例中，Analytics 和 Settings 组件都接收 userId 作为参数，并根据用户 ID 显示不同的内容。

示例输出​

当你访问 /dashboard/123 时，页面将显示以下内容：

Dashboard for User 123
---------------------------------
| Analytics Content for User 123 | Settings Content for User 123 |
---------------------------------

总结​

Next.js 的平行路由功能为构建复杂的用户界面提供了强大的工具。通过平行路由，你可以在同一页面中同时渲染多个独立的路由内容，从而实现更灵活和高效的页面布局。无论是构建仪表盘、分屏布局还是多标签页应用，平行路由都能帮助你轻松实现这些功能。

附加资源​

练习​

  1. 尝试在 Next.js 项目中实现一个简单的仪表盘页面，使用平行路由同时显示多个小部件。
  2. 修改动态平行路由示例，使其支持更多的动态参数，例如 userId 和 projectId。
  3. 探索如何在平行路由中使用 getStaticProps 或 getServerSideProps 来获取数据并传递给组件。
提示

在实现平行路由时，确保每个路由组件都是独立的，这样可以避免不必要的重新渲染和性能问题。