Learnnext-5 :clean urls with Route Masking

这一节讲的是如何将路由屏蔽掉并显示成我们想要的url效果。

在next/link 的link组件当中，有一个as属性用于屏蔽原有的url并且展示你想要的url：

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>
)

然后你会看到url确实变成了你想要的效果。
但是这里又出现其他问题了： 在你跳转过去的时候，你reload页面，就会发现页面上出现了404提示

image.png

这是因为我们在pages目录下没有p/hello-nextjs这个页面，所以服务器找不到这个页面，就报了404。
这样的情况，我们当然不能直接就拿去生产环境，我们必须要修复这个bug。
下一节讲解如何在server当中解决这个问题。