学习 Next.js: 页面之间的导航

原始文档在 https://github.com/developerw... 如今搬过来.

学习 Next.js: 入门
学习 Next.js: 页面之间的导航
学习 Next.js: 使用共享组件
学习 Next.js: 建立动态内容
学习 Next.js: 使用路由掩码建立干净的URL
学习 Next.js: 干净URL的服务器支持
学习 Next.js: 获取数据
学习 Next.js: 部署

页面之间的导航

如今咱们知道了如何建立一个Next.js应用程序而且运行它. 咱们的示例应用程序只有一个简单的页面, 可是若是你想, 能够添加更多的页面. 例如, 能够建立一个 "About" 页面, 并添加内容到 pages/about.js.

export default () => {
  <div>
    <p>This is the about page</p>
  </div>
}

而后, 咱们能够打开 http://localhost:3000/about 来访问这个页面. 而后咱们须要连接这些页面, 使用HTML的 "a" 标签, 可是它并不会执行客户端导航, 它是执行的服务器端导航, 这并非咱们想要的.

为了支持客户端导航, 咱们须要使用Next.js 的Link API, 它是经过 next/link 导出的. 下面咱们来看看如何使用它.

设置

为了按照本课程学习, 须要有一个示例Next.js应用程序, 为此, 你能够下载下面的这个应用程序做为学习案例:

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

能够用下面的命令来运行:

npm install
npm run dev

如今, 访问 http://localhost:3000/.

使用 Link

如今咱们将会使用 next/link 来链接咱们的页面. 添加以下代码到 page/index.js 模块文件

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

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

在这个例子中, 咱们导入了 next/link 做为 Link 模块, 而且向下面这样使用它:

<Link href="/about">
  <a>About Page</a>
</Link>

如今, 再次访问 http://localhost:3000/, 点击 "About Page" 链接, 你将被带到 "About Page" 页面.

这是客户端导航, 行为发生在客户端, 没有请求服务器. 你能够打开浏览器开发工具的网络标签, 看看有没有网络请求来验证.

下面是一个简单的任务:

• 访问 http://localhost:3000/

• 点击 "About Page"

• 点击浏览器的后退按钮

描述一下, 点击后退按钮后你看到了什么? 是的, 客户端导航把你带回了Index页面.

客户端历史支持

当你点击后退按钮的时候, Next.js把你带回了Index页面, 这个过程彻底是客户端实现的; next/link 为你处理了全部 location.history相关的事情. 你甚至不须要编写任意一行客户端路由代码.

你须要作的只是简单的链接页面而已, 就这样!

给链接添加样式

大多数状况, 咱们可能想要给链接添加一点样式. 想下面这样:

<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

添加了样式后, 你会看到, 样式被正确的设置了.

可是, 若是你想下面同样呢, 会发生什么?

<Link href="/about" style={{ fontSize: 20 }}>
  <a>About Page</a>
</Link>

对的, 没任何效果!

链接仅仅是一个高阶组件(HOC:Higher Order Component)

实际上, 样式属性在 next/link 上是没有效果的. 由于 next/link 仅仅是一个可以接收 href 属性, 以及其余属性的高阶主键. 若是你要给它设置样式, 须要在底层的组件进行设置.

使用按钮进行链接

如今, 咱们须要一个按钮而不是一个链接, 如今咱们须要修改咱们的导航代码, 像这样:

<Link href="/about">
  <button>Go to About Page</button>
</Link>

让链接可以任意工做

就像一个按钮同样, 你能够在Link中放置任何你的自定义React组件, 甚至是一个div元素.放在Link中的组件的惟一要求是, 它可以接受一个 onClick 属性.

链接虽然简单, 可是强大

这里, 咱们只看到了关于 next/link 的很基本的例子. 接下来的课程咱们会更加深刻的了解如何使用Link. 若是你想要了解Next.js的路由功能, 参考 Next.js 路由文档 文档.