Route Masking（路由定制）

在这里，我们将使用称为Route Masking的Next.js的独特功能。 基本上，它会在浏览器上显示与您的应用程序看到的实际URL不同的URL。

我们在我们的博客文章URL中添加一个路由掩码。

对pages/index.js应用以下代码：

  1. import Layout from '../components/MyLayout.js'
  2. import Link from 'next/link'
  4. const PostLink = (props) => (
  5.   <li>
  6.     <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
  7.       <a>{props.title}</a>
  8.     </Link>
  9.   </li>
  10. )
  12. export default () => (
  13.   <Layout>
  14.     <h1>My Blog</h1>
  15.     <ul>
  16.       <PostLink id="hello-nextjs" title="Hello Next.js"/>
  17.       <PostLink id="learn-nextjs" title="Learn Next.js is awesome"/>
  18.       <PostLink id="deploy-nextjs" title="Deploy apps with Zeit"/>
  19.     </ul>
  20.   </Layout>
  21. )

看看下面的代码块：

  1. const PostLink = (props) => (
  2.   <li>
  3.     <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
  4.       <a>{props.title}</a>
  5.     </Link>
  6.   </li>
  7. )

在<Link>元素中，我们使用了另一个称为“as”的支柱。 这是我们需要在浏览器上显示的URL。 您的应用看到的URL在“href” prop 中被提及。

现在尝试点击第一个博文，你将被导航到博客文章。

之后，点击返回按钮，然后按前进按钮。 会发生什么？

  1. ✦It throws an error.
  2. ✓It goes back to the index page and navigates again to the post page.
  3. ✦It goes back to the index page but nothing happens after that.
  4. ✦It goes back to the index page then throws an error.