nextjs 中的 2 层嵌套路由

使用Next.JS进行开发可以轻松地构建具有2层嵌套路由的应用程序。2层嵌套路由指的是在URL中有两个层级的路由信息，可以根据这些路由信息来展示不同的页面内容。下面将介绍如何在Next.JS中实现2层嵌套路由，并提供一个案例代码。

在Next.JS中，可以使用文件系统路由来实现嵌套路由。具体来说，可以在pages文件夹下创建一个文件夹来表示第一层路由，然后在该文件夹下创建另一个文件夹来表示第二层路由。每个文件夹中的文件将对应不同的页面。

首先，创建一个名为"pages"的文件夹，并在其中创建一个名为"products"的文件夹。在"products"文件夹中，创建一个名为"[category]"的文件夹，其中"[category]"表示一个动态路由参数，可以根据实际需要进行更改。在"[category]"文件夹中，创建一个名为"[product]"的文件，同样，"[product]"也表示一个动态路由参数。

在"[product]"文件中，可以编写页面的具体内容。例如，可以添加一些商品信息、图片和描述等内容。下面是一个简单的示例代码：

JSx
// pages/products/[category]/[product].JS
import { useRouter } from 'next/router';
export default function ProductPage() {
  const router = useRouter();
  const { category, product } = router.query;
  return (
    <div>
      <h1>{product}</h1>
      
Category: {category}
      <img src={<code>/images/${category}/${product}.jpg</code>} alt={product} />
      
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  );
}

在上面的代码中，使用了Next.JS提供的useRouter钩子来获取路由信息。然后，可以通过router.query来获取动态路由参数的值，并将其用于页面的展示。

在上述例子中，根据URL的路径"/products/category1/product1"，页面将显示商品名称为"product1"的商品信息。同时，还会显示商品所属的类别"category1"和对应的图片。

下面将在文章中的中间段落添加一个标题，并使用标签进行强调：

实例代码：

使用上述案例代码，可以轻松地在Next.JS中实现2层嵌套路由。首先，创建一个名为"pages"的文件夹，并在其中创建一个名为"products"的文件夹。在"products"文件夹中，创建一个名为"[category]"的文件夹，用于表示第一层路由。接着，在"[category]"文件夹中创建一个名为"[product]"的文件，用于表示第二层路由。在"[product]"文件中，编写页面的具体内容。通过使用useRouter钩子获取动态路由参数的值，可以根据不同的URL路径展示不同的商品信息。

使用Next.JS的2层嵌套路由可以帮助我们构建更复杂的应用程序。通过合理地组织文件和文件夹的结构，可以轻松地实现不同层级的路由。这使得我们可以根据URL的不同部分来展示不同的页面内容，为用户提供更好的浏览体验。

希望以上内容能够帮助你理解Next.JS中的2层嵌套路由，并能够在实际项目中应用起来。祝你编写出更加强大和灵活的应用程序！