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

原始文档在 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) => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink id="hello-nextjs" title="Hello Next.js"/>
      <PostLink id="learn-nextjs" title="Learn Next.js is awesome"/>
      <PostLink id="deploy-nextjs" title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

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

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

在 <Link> 元素中, 咱们使用另一个叫作 as 的熟悉. 这是咱们须要显示在浏览器地址栏中的URL. 应用程序看到的实际URL是其实是在 href 熟悉中.

如今点击博客标题连接, 进入博客内容页.

历史感知

正如你所看到的, 路由掩码, 也可以很好的和浏览器历史一块儿工做. 全部须要作的事情只是给连接添加了一个as属性.

重加载

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

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

404

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

所以, 咱们须要解决这个问题.

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