useRouter

Крючок useRouter позволяет программно изменять маршруты внутри компонентов клиента.

Рекомендация: Используйте компонент <Link> для навигации, если нет специальных требований к использованию useRouter.

'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() может воспроизвести тот же результат, если запросы к серверу кэшируются. Другие динамические функции, такие как cookies и headers также могут изменить ответ.

Переход с next/router

Крючок useRouter следует импортировать из next/navigation, а не из next/router, при использовании App Router
Строка pathname была удалена и заменена на usePathname()
Объект query был удалён и заменён на useSearchParams()
router.events был заменён. См. ниже.

Полное руководство по миграции.

Примеры

События маршрутизатора

Вы можете прослушивать изменения страниц, объединив другие крючки компонентов клиента, такие как usePathname и useSearchParams.

'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 null
}

Что можно импортировать в макет.

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().

'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>
  )
}

История версий

Версия	Изменения
`v13.0.0`	`useRouter` от `next/navigation`.