面试题：Next.js 页面路由中动态路由的实现方式及应用场景

Question

在Next.js中，如何实现动态路由？请举例说明动态路由在实际项目中的一个常见应用场景，并阐述其实现步骤和原理。

Answer 1

如何实现动态路由

在Next.js中，通过在页面文件中使用方括号 [] 来定义动态路由。例如，创建一个名为 pages/post/[id].js 的文件，其中 [id] 就是动态参数。

常见应用场景

博客文章详情页是常见场景。每个博客文章有唯一标识符（如文章ID），通过动态路由可根据不同ID展示对应的文章内容。

实现步骤

1. 创建页面文件，如 pages/post/[id].js。
2. 在页面组件中，使用 useRouter 钩子获取动态参数。示例代码如下：

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  );
};

export default Post;

3. 在其他页面通过 Link 组件链接到动态路由页面，并传递参数。例如：

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <Link href="/post/1">
        <a>查看文章1</a>
      </Link>
    </div>
  );
};

export default Home;

原理

Next.js在构建时，会将动态路由页面编译成特殊的路由处理逻辑。当用户访问匹配动态路由的URL时，Next.js会解析URL中的参数，并将其传递给对应的页面组件。useRouter 钩子提供了获取这些参数的便捷方式，从而使得页面能够根据不同参数展示不同内容。