學習 Next.js: 使用路由掩碼建立乾淨的URL

原始文檔在 https://github.com/developerw... 如今搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 建立動態內容
學習 Next.js: 使用路由掩碼建立乾淨的URL
學習 Next.js: 乾淨URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

使用路由掩碼建立乾淨的URL

在前面的課程中, 咱們學到了如何使用查詢串建立動態頁面. 一次爲基礎, 咱們一篇博客的連接會想這樣: http://localhost:3000/post?title=Hello%20Next.js

可是這個URL看起來不怎麼好看, 若是咱們想要下面這樣的連接, 咱們應該怎麼辦呢?

http://localhost:3000/p/hello-nextjs

看起來是否是好不少了, 是吧?

設置

爲了按照本課程學習, 須要有一個示例Next.js應用程序, 爲此, 你能夠下載下面的這個應用程序做爲學習案例:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout create-dynamic-pages

能夠用下面的命令來運行:

npm install
npm run dev

如今, 訪問 http://localhost:3000/.

路由掩碼

如今,咱們將使用Next.js特有的叫作路由掩碼的功能. 基本上, 它在瀏覽器地址欄上顯示一個不一樣於實際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. 應用程序看到的實際URL是其實是在 href 熟悉中.

如今點擊博客標題連接, 進入博客內容頁.

歷史感知

正如你所看到的, 路由掩碼, 也可以很好的和瀏覽器歷史一塊兒工做. 全部須要作的事情只是給連接添加了一個as屬性.

重加載

如今, 轉到主頁: http://localhost:3000/, 而後點擊第一個博客標題, 你會被導航到博客內容頁面.

點擊刷新按鈕從新加載頁面, 會發生什麼?

404

頁面刷新操做放回了一個 404 錯誤頁面. 這是由於, 咱們再服務器上沒有一個這樣的可加載頁面. 服務器會試圖去加載 p/hello-next.js 文件, 可是實際上這個文件是不存在的, 咱們如今只有兩個文件 index.js 和 post.js.

所以, 咱們須要解決這個問題.

在下一節課中, 咱們使用Next.js的自定義服務器API來解決這個問題.