这一节讲的是如何将路由屏蔽掉并显示成我们想要的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当中解决这个问题。
