面试题：Next.js中如何在动态路由页面传递和接收单个参数

Question

假设你有一个Next.js应用，有一个动态路由页面`pages/post/[id].js`，请描述如何在其他页面通过路由传递一个`id`参数到这个动态路由页面，并在`[id].js`页面中正确接收该参数，同时写出关键代码片段。

Answer 1

1. 在其他页面传递参数

在Next.js中，可以使用Link组件来传递参数到动态路由页面。假设在index.js页面传递参数：

import Link from 'next/link';

const HomePage = () => {
  const postId = '123';// 示例id
  return (
    <div>
      <Link href={`/post/${postId}`}>
        <a>Go to Post {postId}</a>
      </Link>
    </div>
  );
};

export default HomePage;

2. 在[id].js页面接收参数

在pages/post/[id].js页面，可以通过useRouter钩子函数来接收参数：

import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
    </div>
  );
};

export default PostPage;