Suggest an editImprove this articleRefine the answer for “How does useRouter work in app router?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)`useRouter` **in the App Router** (Next.js 13+) is a **client navigation hook** that lets you **control transitions and history** without reloading the page. **Key point:** `useRouter` in the App Router is a client navigation hook from `next/navigation` that lets you programmatically control transitions, history, and route refresh, but it is not meant for reading URL parameters.Shown above the full answer for quick recall.Answer (EN)Image`useRouter` **in the App Router** (Next.js 13+) is a **client navigation hook** that lets you **control transitions and history** without reloading the page. Important right away: > `useRouter` **works only in Client Components** and is imported from `next/navigation`. --- ## Where it comes from and where to use it In the **Next.js** App Router: ```ts 'use client' import { useRouter } from 'next/navigation' ``` - needs `'use client'` - cannot be used in Server Components --- ## What `useRouter` does ### 1. Navigation between pages ```ts router.push('/blog') router.replace('/login') ``` - `push` - adds an entry to history - `replace` - replaces the current entry (no Back) --- ### 2. Going back / forward ```ts router.back() router.forward() ``` --- ### 3. Refreshing the current route ```ts router.refresh() ``` - re-requests **Server Components** - re-runs `fetch` on the server - useful after a `Server Action` --- ## What `useRouter` **does not do** in the App Router This is a common trap in interviews. - **does not read params** - **does not read search params** - **does not know the current pathname** For that there are **other hooks**: ```ts useParams() // route params useSearchParams() // ?query=1 usePathname() // /blog/post ``` --- ## Difference from Pages Router | Pages Router | App Router | | --- | --- | | `next/router` | `next/navigation` | | router.query | none | | one hook | several specialized ones | In the App Router there is **separation of responsibility**. --- ## A typical case ```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> } ``` --- ## When to use `useRouter` - navigation on an event (submit, click) - a redirect after an action - refreshing data after a mutation - managing history - not for rendering - not for SEO - not for fetching data --- ## Short answer for an interview > `useRouter` **in the App Router is a client navigation hook from** `next/navigation`**, which lets you programmatically control transitions, history, and route refresh, but it is not meant for reading URL parameters.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.