useRouter() Hook in Next.js

In this tutorial, you will learn how to use the useRouter() hook in Next.js.

The userRouter() hook is used for navigation, and it accesses route information and redirects.

How to import useRouter()?


 import { useRouter } from "next/navigation"

Example:


"use client";
import { useRouter } from "next/navigation";

export default function Dashboard() {
  const router = useRouter();

  return (
    <button onClick={() => router.push("/profile")}>
      Go to Profile
    </button>
  );
}

Note:

1. router.push(url): Navigate to a new route.

2. router.replace(): Does NOT add a new entry to browser history.

3. router.refresh(): Does NOT add a new entry to browser history.

useRouter() Hook in Next.js – Interview Questions

Q 1: What is the useRouter() hook?

Ans: useRouter() provides access to routing information and navigation methods inside client components.

Q 2: Where can useRouter() be used?

Ans: It can only be used inside client components with "use client".

Q 3: What methods does useRouter() provide?

Ans: Methods like push(), replace(), back(), and route parameters.

Q 4: How is useRouter() useful in forms?

Ans: It allows navigation after successful form submission.

Q 5: What replaced useRouter() in App Router for navigation?

Ans: The usePathname() and useSearchParams() hooks.