面试题：Next.js中Link组件如何实现页面跳转并传递参数

Question

在Next.js项目里，假设你有两个页面，`index.js` 和 `details.js`，现在要通过Link组件从`index.js`跳转到`details.js`，并传递一个产品ID作为参数，你将如何实现？请给出具体代码示例。

Answer 1

1. 在 index.js 中使用 Link 组件传递参数：

   import Link from 'next/link';
   
   const IndexPage = () => {
     const productId = '123';// 假设的产品ID
     return (
       <div>
         <Link href={`/details?id=${productId}`}>
           <a>跳转到详情页</a>
         </Link>
       </div>
     );
   };
   
   export default IndexPage;
   

2. 在 details.js 中获取参数：

   import { useRouter } from 'next/router';
   
   const DetailsPage = () => {
     const router = useRouter();
     const { id } = router.query;
     return (
       <div>
         <p>产品ID: {id}</p>
       </div>
     );
   };
   
   export default DetailsPage;