useRouter

useRouter Hook 允許您以程式化的方式在用戶端元件中變更路由。

建議： 除非您有使用 useRouter 的特定需求，否則請使用 <Link> 元件進行導航。

app/example-client-component.tsx

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

`useRouter()`

router.push(href: string, { scroll: boolean })：執行用戶端導航至提供的路由。在瀏覽器的歷史堆疊中新增一個新條目。
router.replace(href: string, { scroll: boolean })：執行用戶端導航至提供的路由，而不會在瀏覽器的歷史堆疊中新增新條目。
router.refresh()：重新整理當前路由。向伺服器發出新請求、重新提取資料請求，並重新渲染伺服器元件。用戶端將合併更新後的 React 伺服器元件有效負載，而不會遺失未受影響的用戶端 React（例如 useState）或瀏覽器狀態（例如滾動位置）。
router.prefetch(href: string)：預先提取提供的路由，以加快用戶端轉換速度。
router.back()：導航回瀏覽器歷史堆疊中的上一個路由。
router.forward()：導航到瀏覽器歷史堆疊中的下一個頁面。

须知:

您不得將不受信任或未經清理的 URL 發送到 router.push 或 router.replace，因為這可能會使您的網站容易受到跨網站腳本 (XSS) 漏洞的攻擊。例如，發送到 router.push 或 router.replace 的 javascript: URL 將在您頁面的上下文中執行。

<Link> 元件會在路由在視窗中可見時自動預先提取路由。

如果提取請求被快取，refresh() 可能會重新產生相同的結果。其他動態 API（例如 cookies 和 headers）也可能會更改回應。

從 `next/router` 遷移

使用 App Router 時，useRouter Hook 應該從 next/navigation 而不是 next/router 匯入。
pathname 字串已被移除，並由 usePathname() 取代。
query 物件已被移除，並由 useSearchParams() 取代。
router.events 已被取代。請參閱下方。

查看完整的遷移指南.

範例

路由事件

您可以透過組合其他用戶端元件 Hook（例如 usePathname 和 useSearchParams）來監聽頁面變更。

app/components/navigation-events.js

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])
 
  return '...'
}

可以匯入到版面配置中。

app/layout.js

import { Suspense } from 'react'
import { NavigationEvents } from './components/navigation-events'
 
export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
 
        <Suspense fallback={null}>
          <NavigationEvents />
        </Suspense>
      </body>
    </html>
  )
}

须知：<NavigationEvents> 包裹在 Suspense 邊界中，因為useSearchParams() 會在靜態渲染期間導致用戶端渲染到最近的 Suspense 邊界。瞭解更多。

停用滾動到頂部

預設情況下，當導航到新路由時，Next.js 會滾動到頁面頂部。您可以透過將 scroll: false 傳遞給 router.push() 或 router.replace() 來停用此行為。