面试题：Next.js中Link组件结合动态路由实现无缝导航的原理及简单应用

Question

在Next.js项目里，简要说明Link组件结合动态路由实现无缝导航的原理。假设我们有一个博客应用，文章列表页面展示多篇文章标题，点击标题要导航到对应文章详情页（文章id作为动态路由参数），请给出实现该功能的核心代码片段，并解释关键部分。

Answer 1

原理

1. Link组件：Next.js中的Link组件会预取目标页面的代码，使得页面切换时无需重新加载整个应用，实现无缝导航。它会在客户端拦截点击事件，避免浏览器默认的全页刷新行为。
2. 动态路由：通过在路由中使用方括号（例如pages/post/[id].js）定义动态路由参数。Link组件在导航时，会根据动态路由的规则，将参数传递到目标页面，目标页面可以通过getStaticProps或getServerSideProps等方法获取该参数，从而加载对应的数据。

核心代码片段

1. 文章列表页面（假设为pages/index.js）

import Link from 'next/link';
import React from 'react';

const posts = [
  { id: 1, title: '文章1标题' },
  { id: 2, title: '文章2标题' }
];

const HomePage = () => {
  return (
    <div>
      {posts.map(post => (
        <Link href={`/post/${post.id}`} key={post.id}>
          <a>{post.title}</a>
        </Link>
      ))}
    </div>
  );
};

export default HomePage;

2. 文章详情页面（pages/post/[id].js）

import React from'react';
import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>文章详情 - {id}</h1>
      {/* 这里可以根据id获取文章具体内容并展示 */}
    </div>
  );
};

export default PostPage;

关键部分解释

1. 文章列表页面：Link组件的href属性设置为动态路由的路径，这里通过模板字符串将文章id拼接到路径中。<a>标签包裹在Link组件内，点击<a>标签时，Link组件拦截点击事件，预取目标页面代码，并导航到对应文章详情页。
2. 文章详情页面：通过useRouter钩子函数获取路由对象，从router.query中提取动态路由参数id，从而可以根据id获取并展示具体的文章内容。