`useRouter` in the App Router: Push, Replace, Refresh, and Back

The useRouter hook lets a Client Component change routes in code, instead of relying on a reader clicking a link. Call it inside an event handler, such as after a button click finishes some logic or a form submits.

App.tsx

// app/search/search-form.tsx
"use client";
import { useRouter } from "next/navigation";
 
export default function SearchForm() {
  const router = useRouter();
  return (
    <button onClick={() => router.push("/search/results")}>View results</button>
  );
}

This hook only works in a Client Component, which is why the file starts with a client directive. Clicking the button changes the URL to the results page and swaps in the new content, the same client-side transition a plain link click triggers.

A common mistake is importing this hook from the wrong package. That older import path belongs to the Pages Router and exposes a different hook entirely, so using it inside an App Router project causes an error. Always import from next/navigation in the App Router, never from next/router.

The four methods, one at a time

Each method changes the current route differently. Pick the one that matches what the reader should actually see happen.

Push and replace both accept an options object as a second argument, such as one that turns off the default scroll-to-top behavior. Neither method takes a separate path string as a second positional argument the way an older router once did.

When replace is the right call

Reach for replace instead of push when the current entry should not stay in history, such as sending a signed-in reader away from a login page after they sign in.

App.tsx

// app/login/redirect-button.tsx
"use client";
import { useRouter } from "next/navigation";
 
export default function GoToDashboard() {
  const router = useRouter();
  return (
    <button onClick={() => router.replace("/dashboard")}>Continue</button>
  );
}

Clicking this button sends the reader to the dashboard, and pressing the browser's back button afterward skips the login page entirely instead of returning to it. That is the visible difference between the two methods.

Getting fresh data with refresh

The refresh method re-runs the current route's data fetching and re-renders its Server Components, without a full browser reload and without losing client-side state such as an open menu or a text field's value. It is the method to reach for right after a mutation changes data the current page depends on, since navigating alone will not pick up that change.

For the exact reason navigating alone does not refresh stale data, see Why router.push() Does Not Refresh Data in Next.js. To compare this hook against server-side redirects, read useRouter vs redirect in Next.js: Client vs Server Navigation.