使用 Link

现在我们将使用next/link链接我们的两个页面。

将以下代码添加到pages/index.js中

  1. // This is the Link API
  2. import Link from 'next/link'
  4. const Index = () => (
  5.   <div>
  6.     <Link href="/about">
  7.       <a>About Page</a>
  8.     </Link>
  9.     <p>Hello Next.js</p>
  10.   </div>
  11. )
  13. export default Index

Here we’ve imported next/link as Link and use it like this:

  1. <Link href="/about">
  2.   <a>About Page</a>
  3. </Link>

现在尝试访问 http://localhost:3000/

然后点击“关于页面”链接。 它将导航到“关于”页面。

这是客户端导航; 该操作发生在浏览器中，而不向服务器发出请求。 您可以通过打开浏览器的网络请求检查器来验证这一点。 好的，现在我们有一个简单的任务：

访问 http://localhost:3000/

  • 然后点击“关于页面”
  • 然后按浏览器的“返回”按钮
  • 你将如何描述“后退”按钮的体验？
  1. ✦按钮不起作用
  2. ✦Back按钮在浏览器控制台上发生错误。
  3. ✓通过客户端将页面导航到索引（home）页面。
  4. ✦它弹出一个警告，提示“import 'next/back' to support back button”。