🚀 Imperative Routing in Next.js

Next.js provides imperative routing using the useRouter hook from next/router. This allows programmatic navigation, unlike declarative routing (which relies on <Link> components).

📌 1. Basic Imperative Navigation

Use the useRouter hook to navigate between pages dynamically:

javascript
<div>      <h1>Home Page</h1>      <button onClick={goToAbout}>Go to About</button>    </div>  );}

✅ Allows navigation without <Link>
✅ Great for button-based routing

📌 2. Navigating with Dynamic Routes

Pass dynamic parameters using query strings:

javascript
const router = useRouter();router.push("/product?itemId=123"); 

Or navigate with URL parameters:

javascript
router.push("/product/123");

📌 3. Using replace() Instead of push()

🔹 push() (Adds to History)

javascript
router.push("/dashboard");

✅ User can go back using the browser’s back button

🔹 replace() (Does Not Add to History)

javascript
router.replace("/dashboard");

✅ Better for login redirects (prevents back navigation)

📌 4. Navigating with State (Shallow Routing)

Shallow routing allows updating the URL without reloading the page.

javascript
router.push("/profile", undefined, { shallow: true });

✅ Useful for updating query params without full page reload

📌 5. Redirecting Users After an Action

Redirect users after form submission or authentication:

javascript
const handleLogin = () => {  // Perform login logic  router.push("/dashboard");};

✅ Seamless user experience

📌 6. When to Use Imperative Routing?

✔️ Button-based navigation (e.g., "Go Back" button)
✔️ Programmatic redirects after login/logout
✔️ Dynamic route navigation (e.g., /product/:id)