官网《Next.js —— 用'路由伪装'清理URLs》

在之前的课程中，我们学习到如何用查询字符创建动态页面。用那种方式，一个博客的请求链接会是这样：

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，而不是在你所见的应用中真实的路由。

让我们增加一个路由伪装到博客的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则在你的应用中的'href'中。

现在试着去点击第一条博客链接，你就会被导航到那个博客。之后，点击后退按钮，再点击前进按钮，会发生什么？

答案是：会再次导航到那个博客页面。

记录历史

正如你所目击的，路由伪装和浏览器的历史浏览记录配合的非常优秀。你所要做的就是添加‘as’属性到链接中。

重新载入

现在进入首页：http://localhost:3000/

然后点击第一条博客的标题，导航到这个博客页面

然后重新加载此页面，发生了什么？

答案是：抛出404错误。

404

浏览器给了一个404错误。那是因为在server端根本就没有一个这样的页面，服务端将会下载页面‘p/hello-nextjs’,但是我们只有两个页面，‘index.js’和'post.js'.

由于这个，我们无法再生产环境运行我们的应用，我们需要修复它。

Next.js‘客户端服务API’已经为这个问题提供了解决方案。

我们将会在下一节课中学习如何使用它。