面试题：Next.js中Link组件如何实现带参数的复杂导航逻辑

步骤描述：
- 在产品列表页：
  - 导入Link组件，Link组件来自next/link。
  - 遍历产品列表数据，为每个产品生成一个Link，Link的href属性需要拼接上产品ID。
- 在详情页：
  - 通过next/router获取URL中的参数，即产品ID，进而根据ID获取产品详情数据并展示。
关键代码示例：
- 产品列表页代码（假设使用TypeScript）：

import Link from 'next/link';
import React from'react';

interface Product {
    id: string;
    name: string;
}

const ProductList: React.FC = () => {
    const products: Product[] = [
        { id: '1', name: 'Product 1' },
        { id: '2', name: 'Product 2' }
    ];
    return (
        <div>
            {products.map(product => (
                <Link href={`/product/${product.id}`} key={product.id}>
                    <a>{product.name}</a>
                </Link>
            ))}
        </div>
    );
};

export default ProductList;

产品详情页代码（假设使用TypeScript）：

import { useRouter } from 'next/router';
import React from'react';

const ProductDetail: React.FC = () => {
    const router = useRouter();
    const { id } = router.query;
    return (
        <div>
            <h1>Product Detail - {id}</h1>
            {/* 这里可以根据id去获取产品详情数据并展示 */}
        </div>
    );
};

export default ProductDetail;

并且需要在pages目录下创建product文件夹，并在其中创建[id].tsx文件（这里假设使用TypeScript）来作为产品详情页，pages目录下创建index.tsx作为产品列表页。这样Link组件就能正确导航到产品详情页并携带产品ID参数。

面试题：Next.js中Link组件如何实现带参数的复杂导航逻辑

知识考点

面试题答案