面试题：Next.js Link组件在中等复杂路由结构中的应用

Question

假设我们有一个Next.js项目，路由结构如下：有一个`/products`页面展示所有产品列表，`/products/[productId]`页面展示单个产品详情，`/products/[productId]/reviews`页面展示该产品的评论。请使用Next.js的Link组件实现从产品列表页面跳转到产品详情页面，以及从产品详情页面跳转到产品评论页面，并说明在这个过程中如何传递参数。

Answer 1

1. 从产品列表页面跳转到产品详情页面：

   • 在/products页面（假设为products.js）中，假设产品列表数据结构如下：

   import Link from 'next/link';
   const products = [
       { id: 1, name: 'Product 1' },
       { id: 2, name: 'Product 2' }
   ];
   const ProductsPage = () => {
       return (
           <div>
               <h1>All Products</h1>
               <ul>
                   {products.map(product => (
                       <li key={product.id}>
                           <Link href={`/products/${product.id}`}>
                               <a>{product.name}</a>
                           </Link>
                       </li>
                   ))}
               </ul>
           </div>
       );
   };
   export default ProductsPage;
   

   • 参数传递说明：这里通过在Link组件的href属性中，将产品的id作为动态路由参数嵌入到链接中，如/products/${product.id}。当点击链接时，productId参数会被传递到/products/[productId]页面。

2. 从产品详情页面跳转到产品评论页面：

   • 在/products/[productId]页面（假设为productDetails.js）中，获取productId参数并生成跳转到评论页面的链接：

   import Link from 'next/link';
   import { useRouter } from 'next/router';
   const ProductDetailsPage = () => {
       const router = useRouter();
       const { productId } = router.query;
       return (
           <div>
               <h1>Product Details: {productId}</h1>
               <Link href={`/products/${productId}/reviews`}>
                   <a>View Reviews</a>
               </Link>
           </div>
       );
   };
   export default ProductDetailsPage;
   

   • 参数传递说明：同样是在Link组件的href属性中，将从当前页面获取到的productId作为动态路由参数嵌入到链接/products/${productId}/reviews中。这样当点击链接时，productId参数就会被传递到/products/[productId]/reviews页面，使得该页面可以根据productId来展示对应的产品评论。