useRouter

useRouter 钩子允许您在客户端组件内部以编程方式更改路由。

建议： 除非您有使用 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> 组件在视口中变得可见时，会自动预取路由。

如果 fetch 请求被缓存，refresh() 可能会重新生成相同的结果。其他动态 API（如 cookies 和 headers）也可能更改响应。

从 `next/router` 迁移

当使用 App Router 时，useRouter 钩子应该从 next/navigation 而不是 next/router 导入
pathname 字符串已被删除，并由 usePathname() 替换
query 对象已被删除，并由 useSearchParams() 替换
router.events 已被替换。请参见下文。

查看完整的迁移指南.

示例

Router 事件

您可以通过组合其他客户端组件钩子（如 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() 来禁用此行为。