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

layman 发布于2019-08-20 16:54 / 2798人阅读

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署页面之间的导航现在我们知道了如何创建一个应用程序并且运行它我们的示例应用程序只有一个简单的页面但

原始文档在 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 () => {
  
    This is the about page
  
}

然后, 我们可以打开 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 = () => (
  
    
      About Page
    
    Hello Next.js
  
)

export default Index

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


  About Page

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

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

下面是一个简单的任务:

访问 http://localhost:3000/

点击 "About Page"

点击浏览器的后退按钮

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

客户端历史支持

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

你需要做的只是简单的连接页面而已, 就这样!

给连接添加样式

大多数情况, 我们可能想要给连接添加一点样式. 想下面这样:


  About Page

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

但是, 如果你想下面一样呢, 会发生什么?


  About Page

对的, 没任何效果!

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

实际上, 样式属性在 next/link 上是没有效果的. 因为 next/link 仅仅是一个能够接收 href 属性, 以及其他属性的高阶主键. 如果你要给它设置样式, 需要在底层的组件进行设置.

使用按钮进行连接

现在, 我们需要一个按钮而不是一个连接, 现在我们需要修改我们的导航代码, 像这样:

让连接能够任意工作

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

连接虽然简单, 但是强大

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

GPU云服务器云服务器 next.js next.js 样式页面之间传值 Next.js 12 正式发布、Yarn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83246.html

学习 Next.js: 使用共享组件

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用共享组件我们知道是和页面相关的通过导出一个组件创建一个页面然后把它放到目录中基于这个文件名存原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Steve_Wang_ 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 使用路由掩码创建干净的URL

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用路由掩码创建干净的在前面的课程中我们学到了如何使用查询串创建动态页面一次为基础我们一篇博客的原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

silenceboy 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 清洁URL的服务器支持

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署干净的服务器支持在前面的课程中我们学习了如何为我们的应用程序创建干净的基本上我们让像这样但是原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: 页面...

Lionad-Morotar 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 获取数据

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署为页面获取数据得益于路由的优点我们知道了如何创建一个具有简介的应用程序实际上我们通常需要从远程数原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

NotFound 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 创建动态内容

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署创建动态页面现在我们知道了如何使用多个页面创建一个基本的应用程序为了创建页面我们需要在磁盘上创建原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

caohaoyu 2019-08-20 16:56 评论0 收藏0