Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює useRouter в app router?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`useRouter` **в App Router** (Next.js 13+) - це **клієнтський хук навігації**, який дозволяє **керувати переходами та історією** без перезавантаження сторінки. **Ключове:** `useRouter` в App Router - це клієнтський хук навігації з `next/navigation`, який дозволяє програмно керувати переходами, історією та оновленням маршруту, але не призначений для читання параметрів URL.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`useRouter` **в App Router** (Next.js 13+) - це **клієнтський хук навігації**, який дозволяє **керувати переходами та історією** без перезавантаження сторінки. Важливо одразу: > `useRouter` **працює тільки в Client Components** і імпортується з `next/navigation`. --- ## Звідки і де використовувати У **Next.js** App Router: ```ts 'use client' import { useRouter } from 'next/navigation' ``` - потрібен `'use client'` - не можна використовувати в Server Components --- ## Що робить `useRouter` ### 1. Навігація між сторінками ```ts router.push('/blog') router.replace('/login') ``` - `push` - додає запис в history - `replace` - замінює поточний (без Back) --- ### 2. Повернення назад / вперед ```ts router.back() router.forward() ``` --- ### 3. Оновлення поточного маршруту ```ts router.refresh() ``` - переопитує **Server Components** - заново виконує `fetch` на сервері - корисно після `Server Action` --- ## Що `useRouter` **не робить** в App Router Це часта пастка на співбесідах. - **не читає params** - **не читає search params** - **не знає поточний pathname** Для цього є **інші хуки**: ```ts useParams() // route params useSearchParams() // ?query=1 usePathname() // /blog/post ``` --- ## Відмінність від Pages Router | Pages Router | App Router | | --- | --- | | `next/router` | `next/navigation` | | router.query | немає | | один хук | кілька спеціалізованих | У App Router - **розділення відповідальності**. --- ## Типовий кейс ```tsx 'use client' import { useRouter } from 'next/navigation' export function LogoutButton() { const router = useRouter() async function logout() { await signOut() router.replace('/login') router.refresh() } return <button onClick={logout}>Logout</button> } ``` --- ## Коли використовувати `useRouter` - перехід за подією (submit, click) - редирект після дії - оновлення даних після мутації - керування history - не для рендеру - не для SEO - не для отримання даних --- ## Короткий висновок для співбесіди > `useRouter` **в App Router - це клієнтський хук навігації з** `next/navigation`**, який дозволяє програмно керувати переходами, історією та оновленням маршруту, але не призначений для читання параметрів URL.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.