這一節(jié)講的是如何將路由屏蔽掉并顯示成我們想要的url效果。

在next/link 的link組件當(dāng)中，有一個(gè)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>
)

然后你會(huì)看到url確實(shí)變成了你想要的效果。
但是這里又出現(xiàn)其他問(wèn)題了： 在你跳轉(zhuǎn)過(guò)去的時(shí)候，你reload頁(yè)面，就會(huì)發(fā)現(xiàn)頁(yè)面上出現(xiàn)了404提示

image.png

這是因?yàn)槲覀冊(cè)趐ages目錄下沒(méi)有p/hello-nextjs這個(gè)頁(yè)面，所以服務(wù)器找不到這個(gè)頁(yè)面，就報(bào)了404。
這樣的情況，我們當(dāng)然不能直接就拿去生產(chǎn)環(huán)境，我們必須要修復(fù)這個(gè)bug。
下一節(jié)講解如何在server當(dāng)中解決這個(gè)問(wèn)題。