面试题：Next.js中如何通过动态路由定义页面与URL路径？

Question

请描述在Next.js中使用动态路由定义页面与URL路径的具体步骤，并且举例说明如何获取动态路由参数。

Answer 1

1. 定义动态路由页面：
   • 在pages目录下创建文件，文件名中使用方括号[]包裹动态部分。例如，要创建一个根据用户ID显示用户信息的页面，可在pages/users目录下创建[id].js文件。这样就定义了一个动态路由页面，id就是动态参数。
2. 获取动态路由参数：
   • 在Next.js中，可以通过useRouter钩子函数来获取动态路由参数。以[id].js页面为例，代码如下：

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

   • 在上述代码中，通过useRouter获取router对象，然后从router.query中解构出id参数，这样就获取到了动态路由中的id值。