面试题：Next.js中嵌套路由的基础实现

Question

在Next.js项目中，假设已有一个基础页面结构，现要求创建一个嵌套路由，子路由路径为父路由路径后加 /details ，例如父路由是 /product/1 ，子路由是 /product/1/details ，请描述实现该嵌套路由的具体步骤以及需要用到的文件和代码片段。

Answer 1

1. 创建页面文件：
   • 在 pages 目录下，假设父路由对应的页面文件在 pages/product/[id].js （这里 [id] 是动态路由参数）。
   • 创建子路由页面文件 pages/product/[id]/details.js。这是 Next.js 约定的嵌套路由页面文件结构。
2. 配置路由（Next.js 自动处理）：
   • Next.js 基于文件系统的路由系统会自动识别这种目录结构并创建相应的嵌套路由。不需要额外复杂的路由配置代码。例如，对于父路由 pages/product/[id].js ，代码可能如下：

import React from'react';

const ProductPage = ({ params }) => {
    const { id } = params;
    return (
        <div>
            <h1>Product {id}</h1>
        </div>
    );
};

export default ProductPage;

• 对于子路由 pages/product/[id]/details.js ，代码可能如下：

import React from'react';

const ProductDetailsPage = ({ params }) => {
    const { id } = params;
    return (
        <div>
            <h1>Product {id} Details</h1>
        </div>
    );
};

export default ProductDetailsPage;

在应用中，当访问 /product/1 时，ProductPage 组件会渲染，当访问 /product/1/details 时，ProductDetailsPage 组件会渲染。同时，params 对象会包含动态路由参数 id ，可以在组件中使用它来展示特定的数据。