Next.js 嵌套路由

Next.js 是一个增强了 React 库功能的Web开发框架。该框架提供了默认的路由功能，允许开发者轻松创建网页，无需担心路由设置。本文将重点介绍如何在Next.js应用程序中实现一种特定类型的路由，即嵌套路由。

先决条件： Next.js路由

什么是嵌套路由？

就像为单个顶级域创建多个子域一样，我们可以在根目录下创建多个子路由。它基本上是一个在另一个路由中的路由。嵌套路由有助于 对网页进行分类。

Next.js中嵌套路由的实现： Next.js以 文件系统 的形式实现路由，其中 ‘pages’ 目录是根目录，对应路径 ‘/’ 。可以通过在‘pages’目录中创建 子目录 来引入嵌套路由。同样，可以在子目录中创建多个子目录。因此，通过这种方式实现了多个目录和它们的路由的嵌套。

创建新的Next.js应用程序的步骤：

在终端中输入以下命令来创建Next.js应用程序。

npx create-next-app@latest <app_name>

占位符‘<>’指定要创建的应用程序的名称。

cd <app_name>

安装所有必需的npm依赖项。

npm install

初始项目结构： 一旦应用程序被创建，我们的项目的文件结构将如下图所示。观察项目结构对于我们的示例非常重要，因为Next.js使用基于文件结构的路由。

Next.js 嵌套路由

示例1： 让我们以一个基本示例来实现嵌套路由。

步骤1： 在“pages”目录下创建一个名为 “nested” 的新目录。

步骤2： 在新创建的 “nested” 目录中创建一个名为 “index.js” 的新页面，该页面将成为 “nested” 目录的根页面。

index.js

export default function nested(){ 
      
        return( 
            <div> 
                <h1 style={{color: "green"}}> 
                    Geeks for Geeks 
                </h1>  
                <h1> Let's learn nested routing! </h1> 
            </div> 
        ); 
}

步骤3： 在“nested”目录下创建一个名为 ‘nested_page.js’ 的新页面。

nested_page.js

export default function nested(){ 
      
    return( 
        <div> 
            <h1 style={{color: "green"}}> 
                    Geeks for Geeks 
            </h1>  
            <h1> Nested routing is simple! </h1> 
        </div> 
    ); 
}

创建嵌套路由后，项目的结构将如下所示。

Next.js 嵌套路由

输出：

Next.js 嵌套路由

URL： “http://localhost:3000/nested/” 会加载“nested”目录的根页面，即“index.js”。

URL： “http://localhost:3000/nested/nested_page” 会加载我们嵌套的页面，位于“nested”目录内，即“nested_page.js”。

示例2： 为了更好地理解在Next.js中实现嵌套路由的方法，我们以GeeksforGeeks的一个基本网站为例，该网站有一个主页（ index.js ）。

步骤1： 替换index.js的内容。为了简单起见，我们将默认的主页替换为一个简单的GeeksforGeeks主页。

index.js

export default function home(){ 
  return( 
      <div> 
          <h1 style={{color: "green"}}> 
                Geeks for Geeks 
          </h1>  
          <h1> Geeks for Geeks home page !!! </h1> 
      </div> 
  ); 
}

步骤2： 创建一个新页面 – articles.js (http://localhost:3000/articles)

现在让我们为我们的基础GeeksforGeeks网站创建一个文章页面。为了实现这个目标，我们不需要实现嵌套路由，只需要在根目录下的“pages”目录下创建所需的页面。所以，让我们在“pages”目录下创建一个名为 ‘articles.js’ 的页面。

articles.js

export default function articles(){ 
    return( 
        <div> 
            <h1 style={{color: "green"}}> 
                Geeks for Geeks 
            </h1>  
            <h1> Articles page of GeeksforGeeks </h1> 
        </div> 
    ); 
  }

现在文件结构看起来像这样。

Next.js 嵌套路由

直到这一点，常规路由已经能够满足我们的需求。

步骤3 ：第一个嵌套路由（http://localhost:3000/articles/dsa）。文章不属于一个单一的分类。技术文章需要根据它们的主题进行分类。为了实现这一点，我们需要实现嵌套路由。可以通过在根目录（’pages’）下创建一个名为 ‘articles’ 的目录，并在‘articles’目录下创建不同类别的文章（例如 ‘dsa.js’ ）来实现。Next.js将自动生成对应于嵌套目录的嵌套路由。

‘dsa.js’

export default function articles(){ 
    return( 
        <div> 
            <h1 style={{color: "green"}}> 
                Geeks for Geeks 
            </h1>  
            <h1> Articles page of GeeksforGeeks </h1> 
        </div> 
    ); 
  }

我们创建了第一个嵌套路由后的文件结构如下所示。

Next.js 嵌套路由

步骤4： 第二个嵌套路由（http://localhost:3000/articles/dsa/post1）

现在，我们在项目中创建了一个示例类别，现在是时候向其添加示例帖子了。为此，我们需要在“articles”目录中创建一个名为 ‘dsa’的目录。 在“DSA”目录中，我们将创建我们的示例帖子 – ‘post1.js’。

post1.js

export default function post1(){ 
    return( 
        <div> 
            <h1 style={{color: "green"}}> 
                Geeks for Geeks 
            </h1>  
            <h1> Sample post of GeeksforGeeks </h1> 
        </div> 
    ); 
  }

文件结构现在看起来如下所示。

Next.js 嵌套路由