五、Next.js，使用路由掩码创建的干净URL

Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。

Next.js目前已经开源，https://zeit.co/blog/next

在上一节课中，我们学习了如何使用查询字符串创建动态页面。有了这个，我们的一个博客帖子的链接如下:

http://localhost:3000/post?title=Hello%20Next.js

但那个URL看起来不太好。
如果我们有这样的东西呢?

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

Paste_Image.png

这将是非常棒的，对吧?

这就是我们在这堂课上要做的。

安装

首先，我们需要一个简单的 Next.js 应用程序。试着下载下面的示例应用程序:

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

你可以执行以下命令：

npm install
npm run dev

路由掩码

在这里，我们将使用 Next.js g 一个独特的特性。我们称之为路由掩码。基本上，它会在浏览器上显示一个不同的URL，而不是你的应用所看到的实际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。
现在，您可以通过导航到 http://localhost:3000/ 来访问该应用程序。你的应用程序看到的URL在“href”中被提到。

---

现在试着点击第一个博客文章，你就会被导航到博客文章。

在那之后，点击后退按钮，然后点击前进按钮。会发生什么呢?

history 识别

正如您所见，路由屏蔽在浏览器历史上的工作非常出色。你所要做的就是为链接添加“as”的属性。

重新载入

现在转到主页:http://localhost:3000/
然后点击第一个帖子标题。你将被导航到文章的页面。

Paste_Image.png

然后重新加载浏览器。会发生什么呢?

404

它给我们一个404错误。这是因为在服务器上没有这样的页面加载。服务器将尝试加载页面 p/hello-next.js,但我们只有两页:index.js 和 post.js

因此，我们无法在生产中运行这款应用。我们需要解决这个问题。

Next.js的自定义服务器API是这个问题的解决方案。

下节课我们将学习如何使用它。

本文翻译自：https://learnnextjs.com/basics/clean-urls-with-route-masking