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()：在瀏覽器的歷史記錄堆疊中導航到下一頁。
注意事項:
<Link>組件會在路由出現在可視區域時自動預先擷取。- 如果擷取請求已快取，則
refresh()可能會產生相同的結果。其他動態 API，例如cookies和headers，也可能會改變回應。
從 next/router 遷移
- 使用應用程式路由器時，應從
next/navigation而不是next/router導入useRouterhook。 pathname字串已被移除，並由usePathname()取代。query物件已被移除，並由useSearchParams()取代。router.events已被取代。請見下方。
範例
路由器事件
您可以透過組合其他 Client Component hooks，例如 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() 來停用此行為。
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', { scroll: false })}
>
Dashboard
</button>
)
}