学习 Next.js: 使用路由掩码创建干净的URL

silenceboy 发布于2019-08-20 16:56 / 3430人阅读

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

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

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

使用路由掩码创建干净的URL

在前面的课程中, 我们学到了如何使用查询串创建动态页面. 一次为基础, 我们一篇博客的链接会想这样: http://localhost:3000/post?title=Hello%20Next.js

但是这个URL看起来不怎么好看, 如果我们想要下面这样的链接, 我们应该怎么办呢?

http://localhost:3000/p/hello-nextjs

看起来是不是好很多了, 是吧?

设置

为了按照本课程学习, 需要有一个示例Next.js应用程序, 为此, 你可以下载下面的这个应用程序作为学习案例:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout create-dynamic-pages

可以用下面的命令来运行:

npm install
npm run dev

现在, 访问 http://localhost:3000/.

路由掩码

现在,我们将使用Next.js特有的叫做路由掩码的功能. 基本上, 它在浏览器地址栏上显示一个不同于实际URL的地址.

现在, 我们来给我们的博客地址添加一个路由掩码.

pages/index.js 的内容修改为如下:

import Layout from "../components/MyLayout.js"
import Link from "next/link"

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

export default () => (
  
    My Blog
    
      
      
      
    
  
)

看一下下面的这个代码块:

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

在元素中, 我们使用另外一个叫做 as 的熟悉. 这是我们需要显示在浏览器地址栏中的URL. 应用程序看到的实际URL是实际上是在 href 熟悉中.

现在点击博客标题链接, 进入博客内容页.

历史感知

正如你所看到的, 路由掩码, 也能够很好的和浏览器历史一起工作. 所有需要做的事情只是给链接添加了一个as属性.

重加载

现在, 转到主页: http://localhost:3000/, 然后点击第一个博客标题, 你会被导航到博客内容页面.

点击刷新按钮重新加载页面, 会发生什么?

404

页面刷新操作放回了一个 404 错误页面. 这是因为, 我们再服务器上没有一个这样的可加载页面. 服务器会试图去加载 p/hello-next.js 文件, 但是实际上这个文件是不存在的, 我们现在只有两个文件 index.js 和 post.js.

因此, 我们需要解决这个问题.

在下一节课中, 我们使用Next.js的自定义服务器API来解决这个问题.

云服务器 GPU云服务器 next.js next.js 样式 url路由 url路由实现

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

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

学习 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: ...

caohaoyu 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 入门

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署哪位分高的帮忙创建一个的标签谢谢现暂时放在标签下面了新建文章有时间限制一会全部发上来这是最近两天原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Miracle 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 页面之间的导航

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

layman 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 使用共享组件

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

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