Next js 中的嵌套路由

JS

Next.JS 是一个基于 React 的开源框架，用于构建服务器渲染的 React 应用程序。它具有许多强大的功能，其中之一是嵌套路由。嵌套路由允许我们在应用程序中创建更复杂的路由结构，使页面之间的导航更加灵活和高效。

嵌套路由的概念很简单，就是在一个页面中嵌套另一个页面。这样，我们可以在一个页面中展示多个相关的内容，而不需要加载不同的页面。通过嵌套路由，我们可以实现更好的代码组织和更好的用户体验。

在 Next.JS 中实现嵌套路由非常简单。首先，我们需要创建一个文件夹来存放我们的嵌套路由页面。在这个文件夹中，我们可以创建多个页面组件，每个组件代表一个嵌套路由页面。然后，我们需要在父级页面中创建一个动态路由，用于匹配子级页面的路径。

让我们以一个博客网站为例来演示如何使用 Next.JS 的嵌套路由。假设我们的网站有一个博客页面，用于展示所有博客文章的列表。我们还希望在博客页面中能够点击每篇文章，跳转到具体的文章页面。

首先，我们在 pages 文件夹中创建一个名为 blog 的文件夹，用于存放博客页面相关的文件。在 blog 文件夹中，我们创建两个文件：index.JS 和 [slug].JS。index.JS 是博客页面的主页面，用于展示所有博客文章的列表。[slug].JS 是一个动态路由页面，用于展示具体的文章内容。

在 index.JS 文件中，我们可以编写以下代码：

JSx
import Link from 'next/link';
const BlogPage = () => {
  return (
    <div>
      <h1>博客文章列表</h1>
      <ul>
        <li>
          <Link class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/blog/article-1">
            <a>文章1</a>
          </Link>
        </li>
        <li>
          <Link class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/blog/article-2">
            <a>文章2</a>
          </Link>
        </li>
        <li>
          <Link class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/blog/article-3">
            <a>文章3</a>
          </Link>
        </li>
      </ul>
    </div>
  );
};
export default BlogPage;

在上面的代码中，我们使用了 Link 组件来创建链接到具体文章页面的导航。通过 href 属性，我们可以指定链接的目标路径。当用户点击链接时，Next.JS 会自动加载对应的页面组件。

接下来，我们在 [slug].JS 文件中编写以下代码：

JSx
const ArticlePage = ({ slug }) => {
  return (
    <div>
      <h1>文章：{slug}</h1>
      
这是文章 {slug} 的内容。
    </div>
  );
};
export default ArticlePage;
export async function getServerSideProps(context) {
  const { slug } = context.params;
  return {
    props: {
      slug
    }
  };
}

在上面的代码中，我们使用动态路由来匹配具体的文章页面。[slug].JS 文件名中的 [slug] 表示动态的部分，它可以匹配任意的路径片段。在页面组件中，我们可以通过 props 获取到动态路由的参数。在这个例子中，我们将文章的 slug 作为参数传递给 ArticlePage 组件，并在页面中展示出来。

需要注意的是，我们还使用了 getServerSideProps 函数来获取动态路由的参数。这个函数在服务器端执行，可以根据参数获取到相应的数据，并将数据作为 props 传递给页面组件。

通过以上的代码，我们已经成功实现了一个简单的博客网站，并使用了 Next.JS 的嵌套路由功能。用户可以在博客页面中点击每篇文章，跳转到具体的文章页面，同时保持了页面间的导航结构的一致性。

：

Next.JS 的嵌套路由功能使得构建复杂的页面导航变得更加简单和灵活。通过创建文件夹来存放嵌套路由页面，并使用动态路由来匹配路径，我们可以轻松地实现页面间的导航和内容展示。嵌套路由不仅提高了代码的组织性，还大大提升了用户的体验。

希望本文能够帮助你理解 Next.JS 中的嵌套路由，并在实际项目中应用起来。如果你还没有尝试过 Next.JS，不妨动手搭建一个简单的应用，体验一下它的强大功能吧！