09-15-2021

本章內容

• pages意想不到的用途！
  • 每個頁面都是以pages作為基準路徑
• 動態路徑使用說明書
  • 有query對象
  • 多個動態路徑的方式
  • 使用next/link的路徑方式
  • 使用到全部的路徑方式

pages意想不到的用途！

每個頁面都是以pages作為基準路徑

在建立完新的專案後，在資料夾中會發現有一個名字叫做pages的資料夾，這是我們現在要講的主題！
我們可以使用: .js、jsx、.ts、.tsx，各種JavaScript的寫法輸出component的頁面。
每一個在pages中的檔案都會是以pages當作路徑。

// 假設在pages有一個cat.js頁面
// 那麼cat.js的路徑就會是：`/cat`

function Cat(){
  return <div>Cat</div>
}

expert default Cat

動態路徑使用說明書

在next.js 中無法使用/apple/:id的參數路由的方式得到參數，只能透過query的方式獲取到參數，/apple/[pid].js的方式，頁面網址會匹配頁面：apple/1、apple/2。

有query對象

// /apple/1
{"id":"1"}

// /apple/1?pid=abc

多個動態路徑的方式

pages/cat/[pid]/[comment].js--->匹配的路徑為/pages/apple/cat-comment
[pid]在這裡的角色是，頁面
[comment]在這裡的角色，頁面內容
query的對象為：

{"pid":"apple","comment":"cat-comment"}

使用next/link的路徑方式

使用next/link的方式

1. 引入next/link到component中
2. 使用Link標籤，這邊會被編譯成a連結

import Link from 'next/link'

function Cat() {
  return (
    <ul>
      <li>
        <Link href="/cat/abc">
          <a>去吧！ pages/cat/[pid].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

使用到全部的路徑方式

使用...在括號內的擴展符號，可以擴展動態路徑用來獲取全部的路徑。
例如:pages/cat/[...slug].js--->會匹配成cat/a、cat/ab、cat/abc

• slug也可以使用[...param]的名稱。

1. 路徑cat/a會有的query對象如下，匹配的參數會作為查詢的參數在發送到頁面，並且會是一個陣列。

{"slug":["a"]}

2. 若是有兩個以上匹配路徑的話，新的參數添加的方式如下:cat/ab

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

3. 可以選擇的多重路徑。通過[[...slug]]包含參數，這樣的路徑下是可以被當成可以選擇的。
   pages/cat/[[...slug]].js，會匹配的路徑為/cat、cat/a、cat/ab。
   與一開始的pages/cat/[...slug].js的差別在於，可以選擇的多重路徑也匹配不帶參數的路由。如/cat
4. 不提供路由參數的狀況下query會是一個空陣列