二、Next.js，页面导航

Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。

Next.js目前已经开源，https://zeit.co/blog/next

现在我们知道如何创建一个简单的Next.js应用并运行它。我们的简单应用只有一个页面，但是我们可以添加任意多的页面。例如,我们可以创建一个“About”页面,将下面的内容添加到 pages/about.js:

export default () => (
  

    
This is the about page
  
)

然后我们可以访问那个页面通过 http://localhost:3000/about

在那之后，我们需要连接这些页面。我们可以使用HTML的“a”标签。然而，它不会执行客户端导航;它通过服务器导航到页面，这不是我们想要的。

为了支持客户端导航，我们需要使用Next.js API的Link,这时可以导入 next/link

让我们看看如何使用它。

安装

为了跟上这节课的学习，你需要有一个简单的Next.js应用。为此,继续上一节课的工作，或者下载下面的示例应用程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout getting-started

你可以通过以下命令执行:

你可以用它来运行它:

现在，您可以通过导航 http://localhost:3000/ 来访问该应用程序。

使用Link

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

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

// This is the Link API
import Link from 'next/link'

const Index = () => (
 

   
     About Page
   
   
Hello Next.js
 
)

export default Index

这里我们导入了 next/Link 作为链接，然后使用它:

  About Page

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

然后点击“About Page”链接。它将导航你到“About”页面。

这是客户端导航;这个动作发生在浏览器中，不向服务器发出请求。
您可以通过打开浏览器的网络请求检查器来验证这一点。

好了，现在我们有一个简单的任务:

1. 访问http://localhost:3000 /
2. 然后点击“About Page”
3. 然后点击浏览器的后退按钮

你最好如何形容的后退按钮的经验？

客户端访问历史支持

当你点击后退按钮时，它通过客户端将页面导航到 index 页面; next/link 为你处理了所有的 location.history

您甚至不需要编写哪怕一行的客户端路由代码。

Link的样式

大多数时候,我们可能想要对我们的链接定义样式。这就是我们如何做到的:

  About Page

一旦添加了这个，您就可以看到该样式正确地应用了。

那么这样做会怎么样呢?

  About Page

上面的代码发生了什么变化?

Link只是一个高阶组件(HOC)

实际上，next/link 的样式属性支持没有效果。那是因为 next/link 仅仅是一个高阶组件，它只接受“href”和一些类似的属性。如果需要对其进行样式化，则需要对其底层组件进行处理。

按钮链接

假设我们需要使用一个“button”而不是一个锚点来连接我们的链接。然后我们需要像这样编辑我们的导航代码:

  Go to About Page

当你点击index页面上的button时会发生什么?

Link适用于所有东西

就像一个button一样，您可以在一个Link中放置任何定制的响应组件甚至是div。

在一个Link中放置组件的唯一要求是，它们应该接受一个onClick的属性。

链接很简单，但功能强大

这里我们只讨论了 next/link 最基本的用法. 有一些有趣的方法来使用它，我们将在接下来的课程中学习它们。

与此同时，我们来看看 Next.js 的路由文档。你会发现它很有用。

本文翻译自：https://learnnextjs.com/basics/navigate-between-pages