一、简介 你好呀！ 欢迎阅读有关 Next.js 中并行路线的综合指南。 随着数字环境的发展，网络开发的复杂性也在不断发展。现代 Web 应用程序不仅需要强大的功能，还需要多功能的路由机制，以增强用户体验并适应复杂的设计结构。 本文经过精心编写，旨在了解 Next.js 13.3 中引入的强大功能 - 并行路由。 目标有两个：首先，让人们清楚地了解并行路线的重要性及其实际应用；其次，提供在 Next.js 项目中有效实施并行路线的实践见解。 让我们开始这个旅程，探索并行路线的变革潜力以及它们如何重新定义 Web 应用程序设计的边界。  2. 并行路线出现之前的世界 在并行路由出现之前，Web 开发人员在如何在单个视图上动态构建和显示内容方面受到限制。传统的路由机制相当线性：一个 URL，一个视图。 例如，考虑一个典型的仪表板设计：   // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; } 导航到 将呈现用户仪表板，而 将显示团队仪表板。两者是相互排斥的。要查看不同的片段，用户通常必须完全离开当前视图。 /dashboard/user /dashboard/team 这带来了挑战，特别是当开发人员想要同时或有条件地显示网站的多个部分时。传统的路由方法缺乏灵活性，因此很难在不诉诸复杂的状态管理或解决方法的情况下创建复杂的交互式布局，例如并排仪表板或模式。 值得庆幸的是，随着 Next.js 等框架的发展以及并行路由的引入，这种情况已经发生了巨大的改变，迎来了动态和自适应网页设计的新时代。  3. 了解并行路由 并行路由是 Next.js 13.3 中引入的突破性功能，显着改变了开发人员处理路由和 Web 内容呈现的方式。  3.1 并行路由简介：  Next.js 13.3 带来了全新的动态约定，可以实现更高级的路由案例。正如文档中所述，  “并行路由允许您在同一视图中显示多个页面，例如复杂的仪表板或模式。使用并行路由，您可以在同一视图中同时渲染一个或多个页面，并且可以独立导航。” 简而言之，应用程序的不同组件或部分可以同时加载，从而给人一种流动性和响应能力的感觉，特别是当某些组件由于获取数据或渲染而花费更长的时间时。  3.2 用例：仪表板、模态框等： 现代 Web 应用程序的结构通常需要结合多个视图的高级布局，或者需要上下文弹出窗口而不丢失底层内容。 以文档中的示例为例：  dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js 此布局演示了如何使用并行路由，使用名为“槽”的同一视图上同时显示用户和团队仪表板，“槽”是这种新路由方法的原生功能。  3.3 好处：多页面视图、条件渲染、独立导航： 并行路由的优点是多方面的。正如所强调的，它们允许：  “在同一视图中同时渲染一个或多个页面，可以独立导航”。 此外，它们还可用于页面的条件渲染，从而为 Web 应用程序提供前所未有的灵活性和活力。 从本质上讲，随着并行路由的出现，Web 开发人员现在能够更好地构建复杂、动态且用户友好的 Web 界面，为现代 Web 不断变化的需求量身定制。  4. 并行路由如何工作 深入了解并行路由可以看出 Next.js 13.3 的构建是多么巧妙。让我们逐步了解详细信息。  4.1 介绍“槽”和@folder约定：  “时隙”的概念是并行路由的核心。将插槽视为可以显示网站不同页面或部分的指定区域。   约定是用于设置这些槽的方法，如文档注释所示： @folder  “并行路由使用这些命名的‘槽’，使用 @folder 方法定义。” 代码说明： 并行路由的文件夹结构：考虑以下示例：   dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js 在这里，“@user”和“@team”充当不同内容的容器，使我们能够更灵活地设计我们的网站。 布局如何使用插槽作为道具：根据文档，同一路线段内的布局可以使用这些插槽作为道具。这是一个明显的例子：   export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }   函数用于确定用户的类型，进而决定是否显示 或 槽位。 注意：在上面的代码中， getCurrentUserType() user team 隐式与显式路由槽：Next.js 路由的优点之一是其灵活性。虽然我们示例中的“@user”和“@team”是我们定义的显式槽（直接链接到  ），但还有一个隐式或自动槽。 @folder 该文档解释说 “  是这种自动槽，我们不需要将其与 关联。因此，  功能与 相同。” children @folder dashboard/page.js dashboard/@children/page.js 通过彻底掌握并行路由的运作方式，开发人员可以优化 Next.js 13 的功能，打造更直观、适应性更强的网站。  5. 如何使用并行路由的分步指南 5.1 设置新的 Next.js 应用程序 首先创建一个新的 Next.js 应用程序：   npx create-next-app@latest parallel-routes 导航到新创建的应用程序的目录：   cd parallel-routes 启动开发服务器：   yarn dev  5.2 构建应用程序 在项目目录中，创建以下文件夹和文件：   app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js  5.3 创建比较并模拟数据加载 在 中，我们将创建组件来显示和模拟加载时间，以了解组件加载的视觉顺序： app/@folder1/page.js   export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> } 同样，在 中： app/@folder2/page.js   export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> } 这些模拟的加载时间使您可以直观地欣赏并行路线的功能。  5.4 更新布局代码 在 中，调整布局代码以适应这两个文件夹： app/layout.js 前：   // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) } 后：   // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); } 请随意设计最佳的布局样式，以提高可读性 5.5 添加加载状态 指出： Next.Js 文档 特殊文件 可帮助您使用 创建有意义的加载UI。通过此约定，您可以在加载路线段内容时显示服务器的 。渲染完成后，新内容会自动换入。 loading.js React Suspense 即时加载状态 对于每个组件（folder1 和folder2），我们将创建一个加载状态。你的文件夹结构应该是这样的：   app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js 应用程序/@folder1/loading.js   export default function Loading() { return <p>LOADING FOLDER 1...</p> } 应用程序/@folder2/loading.js   export default function Loading() { return <p>LOADING FOLDER 2...</p> }  5.6.修改页面 调整 的内容。 app/page.js 此修改确保主页不显示任何内容，让并行路线大放异彩：   import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null } 免责声明 在练习并行路线时，我发现热重载并没有按预期显示路线。我没有调查过这个问题，所以我不能告诉你到底是什么问题。如果遇到这种情况，只需重新启动开发服务器即可反映更改。 结论 Next.js 13.3 中引入的并行路由标志着 Web 开发领域的重大进步。 在成立之前，开发人员面临着同时显示网站的多个部分的挑战，而传统的路由提供了更线性的体验。 通过并行路由，Next.js 提供了一种创新的动态网页设计方法，允许在单个视图中同时渲染多个页面。 这一强大的功能不仅提供了增强的用户体验，而且还促进了复杂的布局和条件渲染，突破了当代 Web 应用程序设计的界限。 通过遵循上面提供的详细指南，开发人员可以深入了解并行路由的工作原理，从理解“槽”和“@folder”约定等核心概念到使用 Next.js 框架的实际实现。 虽然可能会遇到一些障碍，例如著名的热重载问题，但通过并行路线为 Web 应用程序添加的灵活性和活力使得学习曲线值得。 随着数字环境的不断发展，此类工具和功能无疑将在塑造网络开发的未来方面发挥关键作用。 再次感谢您的耐心和奉献。 有反馈或问题吗？请随意分享。每个声音都会增加价值。 与我联系：   社区   社区         dev.to @leandro_nnz hackernoon.com @leandronnz hashnode.com Leandronnz twitter.com @digpollution 下次再见，祝您编码愉快！ 参考 您可以 此存储库中找到完整的代码。 在 官方 Next.js 文档 。 在这里 为了构建本文，我使用了  。 StackEdit 照片由 上的 拍摄 Unsplash Markus Spiske

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

該音頻是用故事的原始語言製作的！

Next.Js 13 条并行路由：综合指南

About Author

註釋

標籤

这篇文章刊登在

Related Stories

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

看不见的层面：为什么用户访谈是不可替代的资产

如何将您的工作流程提高 10 倍：17 个必备应用程序

架构师指南：构建 AI/ML 数据湖参考架构

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

看不见的层面：为什么用户访谈是不可替代的资产

如何将您的工作流程提高 10 倍：17 个必备应用程序

架构师指南：构建 AI/ML 数据湖参考架构

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps