動態路由

例子

• Dynamic Routing

對於複雜的應用程式，使用預先定義好的路徑來定義路由往往是不夠的。在 Next.js 中，你可以將中括號添加到頁面 （[param]）來創建一個動態路由（又稱為網址別名（ url slugs )、漂亮的路由（ pretty urls ）等）。

思考一下這個頁面 pages/post/[pid].js :

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

/post/1 ， /post/abc 等的路由都會被 pages/post/[pid].js 匹配。匹配的路徑參數將會被當成一個查詢參數（ query params ）發送至頁面，並且與其他查詢參數合併。

舉例來說，路由 /post/abc 將具有以下的 query 物件。

{ "pid": "abc" }

同樣地，路由 /post/abc?foo=bar 將具有以下的 query 物件。

{ "foo": "bar", "pid": "abc" }

然而，路由參數將會覆蓋同樣名稱的查詢參數。舉例來說， /post/abc?pid=123 將具有以下的 query 物件。

{ "pid": "abc" }

多重動態路由片段也是依照相同方法來運作。頁面 pages/post/[pid]/[comment].js 將會匹配路由 /post/abc/a-comment ， 並且它的 query 物件將會是：

{ "pid": "abc", "comment": "a-comment" }

客戶端導航到動態路由用 next/link 處理。如果我們想要連結到上面使用的路由，它看起來像是：

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          <a>Also goes to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          <a>Go to pages/post/[pid]/[comment].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

閱讀我們的文件 Linking between pages 來學習更多。

捕獲所有的路由

例子

• Catch All Routes

可以通過在括號內加入三個點 (...) 來擴展動態路由以捕獲所有路徑。例如：

• pages/post/[...slug].js 能匹配 /post/a ，也能匹配 /post/a/b ， /post/a/b/c 等。

注意： 你可以使用 slug 以外的名稱, 例如: [...param]

匹配的參數將作為查詢參數（ 範例中是 slug ）發送到頁面，並且它始終都會是一個陣列，因此，路徑 /post/a 將具有以下的 query 物件。

{ "slug": ["a"] }

/post/a/b 和任何其他路徑匹配的情況下，新的參數將會被添加到陣列中，如下所示：

{ "slug": ["a", "b"] }

可選的捕獲所有路由

通過將參數包在雙括號（[[...slug]]）中，可以使捕獲所有路由變成是可選的。

舉例來說， pages/post/[[...slug]].js 將匹配 /post ， /post/a ， /post/a/b 等。

捕獲所有路由和可選捕獲所有路由最大的差別在於，當使用可選捕獲時，沒有帶參數的路由也被匹配到 （ 上面例子中的 /post）。

其 query 物件如下：

{ } // GET `/post` (empty object)
{ "slug": ["a"] } // `GET /post/a` (single-element array)
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)

注意事項

• 預先定義路由的優先順序高於動態路由，動態路由的優先度高於捕獲所有路由，請看以下的範例：
• pages/post/create.js - 將會匹配 /post/create 。
• pages/post/[pid].js - 將會匹配 /post/1 ， /post/abc 等。但不會匹配 /post/create 。
• pages/post/[...slug].js - 將會匹配 /post/1/2 ， /post/a/b/c 等。但不會匹配 /post/create, /post/abc 。
• 通過 自動靜態最佳化 進行靜態最佳化的頁面將會在沒有提供路由參數的情況下水合（ hydrated ），換句話說 query 將會是一個空物件 ({})。

經過水和 （ hydration ）後，Next.js 將會觸發你的應用程式更新，來提供 query 物件裡的路由參數。

相關文件

想知道更多下一步的資訊， 我們推薦以下的文章：