連結與導航

Next.js 路由器讓您能在頁面之間進行客戶端路由轉換，類似單頁應用程式 (SPA) 的行為。

系統提供了一個名為 Link 的 React 元件來實現這種客戶端路由轉換。

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">首頁</Link>
      </li>
      <li>
        <Link href="/about">關於我們</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">部落格文章</Link>
      </li>
    </ul>
  )
}

export default Home

上例使用了多個連結。每個連結都將路徑 (href) 映射到已知頁面：

/ → pages/index.js
/about → pages/about.js
/blog/hello-world → pages/blog/[slug].js

任何在視窗內 (初始或透過滾動) 的 <Link /> 都會預設預先獲取 (prefetch) 使用靜態生成 (Static Generation) 的頁面 (包含對應資料)。而對於伺服器渲染 (server-rendered) 的路由，對應資料只會在點擊 <Link /> 時獲取。

連結到動態路徑

您也可以使用插值來建立路徑，這對於動態路由區段 (dynamic route segments) 非常有用。例如，顯示作為 prop 傳遞給元件的文章列表：

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

範例中使用 encodeURIComponent 來保持路徑的 utf-8 相容性。

或者，使用 URL 物件：

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

現在，我們不再使用插值建立路徑，而是在 href 中使用 URL 物件，其中：

pathname 是 pages 目錄中的頁面名稱。本例為 /blog/[slug]
query 是包含動態區段的物件。本例為 slug

注入路由器

要在 React 元件中存取 router 物件，您可以使用 useRouter 或 withRouter。

一般我們推薦使用 useRouter。

命令式路由

next/link 應該能滿足大多數路由需求，但您也可以在不使用它的情況下進行客戶端導航，請參閱 next/router 文件。

以下範例展示如何使用 useRouter 進行基本頁面導航：

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      點擊此處閱讀更多
    </button>
  )
}

淺層路由 (Shallow Routing)

範例

淺層路由範例

淺層路由允許您在不重新執行資料獲取方法的情況下變更 URL，這包括 getServerSideProps、getStaticProps 和 getInitialProps。

您將透過 router 物件 (由 useRouter 或 withRouter 添加) 接收更新的 pathname 和 query，而不會失去狀態。

要啟用淺層路由，請將 shallow 選項設為 true。參考以下範例：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// 當前 URL 是 '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // 總是在首次渲染後進行導航
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // 計數器變更了！
  }, [router.query.counter])
}

export default Page

URL 會更新為 /?counter=10 且頁面不會被替換，只有路由狀態會變更。

您也可以透過 componentDidUpdate 監聽 URL 變更，如下所示：

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 確認 props 已變更以避免無限循環
  if (query.counter !== prevProps.router.query.counter) {
    // 根據新查詢獲取資料
  }
}

注意事項

淺層路由僅適用於當前頁面的 URL 變更。例如，假設我們有另一個名為 pages/about.js 的頁面，您執行以下程式碼：

router.push('/?counter=10', '/about?counter=10', { shallow: true })

由於這是一個新頁面，即使我們要求進行淺層路由，它仍會卸載當前頁面、載入新頁面並等待資料獲取。

當淺層路由與中介軟體 (middleware) 一起使用時，它不會像以前沒有中介軟體時那樣確保新頁面與當前頁面匹配。這是因為中介軟體能夠動態重寫，且無法在客戶端不進行資料獲取 (淺層路由會跳過此步驟) 的情況下驗證，因此淺層路由變更必須始終被視為淺層。

連結到動態路徑

注入路由器

命令式路由

淺層路由 (Shallow Routing)

注意事項

On this page