链接页面
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 7 课，共 47 课。
两个互相无法访问的页面还不能算是网站。你需要添加链接，Next.js 有自己的链接组件：
import Link from 'next/link';
export default function Home() {
return (
<nav>
<Link href="/about">About</Link>
</nav>
);
}它看起来像一个 <a>，在完成的 HTML 中它确实是一个：href 相同，可以右键点击，也能被屏幕阅读器和搜索引擎读取。那么为什么不直接写 <a href="/about"> 呢？
这是因为浏览器处理普通链接时，会丢弃当前页面并加载一个全新的页面。所有脚本都会重新下载，React 会从头启动，内存中的所有内容都会消失：打开的菜单、填到一半的表单、购物车里的商品。
Link 会拦截点击，并只替换屏幕上实际发生变化的部分。应用不会重新启动，因此状态会保留，新页面会立即显示。
<a href>：完整重新加载，应用重新启动，状态丢失<Link href>：URL 相同，HTML 中的<a>相同，不会重新加载
规则很简单：在你的应用内，始终使用 Link。只有链接会跳转到你的网站之外时，才使用普通的 <a>。
挑战
简单两个页面都已创建，但还无法在它们之间跳转。用 Link 把它们连接起来。
- 在两个文件中，从
next/link导入Link。 - 在
app/page.jsx中，添加一个指向/about的链接，并设置id="to-about"。 - 在
app/about/page.jsx中，添加一个指向/的返回链接，并设置id="to-home"。
链接文字由你决定。测试会点击每个链接，并检查是否跳转到了正确的页面。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
