跳至內容
建置您的應用程式路由連結和導覽

連結與導覽

Next.js 路由器允許您在頁面之間進行客戶端路由轉換，類似於單頁應用程式。

提供了一個名為 Link 的 React 元件來執行此客戶端路由轉換。

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}
 
export default Home

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

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

任何在視口範圍內（初始或透過捲動）的 <Link /> 都會預設為使用 靜態生成 的頁面預先提取（包括對應的資料）。伺服器端渲染 路由的對應資料*僅在*點擊 <Link /> 時才會提取。

連結到動態路徑

您也可以使用插值來建立路徑，這對於動態路由區段來說非常方便。例如，要顯示已作為 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')}>
      Click here to read more
    </button>
  )
}

淺層路由

範例

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

您將透過 router 物件（由 useRouter 或 withRouter 加入）接收更新後的 pathname 和 query，而不會遺失狀態。

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

import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Current URL is '/'
function Page() {
  const router = useRouter()
 
  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
 
  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}
 
export default Page

URL 將會更新為 /?counter=10，且頁面不會被取代，只有路由的狀態會被更改。

您也可以透過 componentDidUpdate 監控 URL 的變化，如下所示：

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verify props have changed to avoid an infinite loop
  if (query.counter !== prevProps.router.query.counter) {
    // fetch data based on the new query
  }
}

注意事項

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

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

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

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