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
网友评论