آموزش کامل هوک useRouter در Next.js | جابه‌جایی بین صفحات به صورت برنامه‌نویسی

یکی از مهم‌ترین هوک‌هایی که هنگام کار با Next.js App Router با آن روبه‌رو می‌شوید، هوک useRouter است.

تا قبل از این، برای رفتن از یک صفحه به صفحه دیگر معمولاً از کامپوننت Link استفاده می‌کردیم.

اما همیشه قرار نیست کاربر با کلیک روی یک لینک وارد صفحه جدید شود.

گاهی اوقات می‌خواهیم بعد از انجام یک عملیات، مانند ورود کاربر، ثبت فرم یا کلیک روی یک دکمه، به صورت برنامه‌نویسی کاربر را به صفحه دیگری منتقل کنیم.

در چنین شرایطی، useRouter بهترین انتخاب است.

useRouter چیست؟

useRouter یک Hook از پکیج next/navigation است که امکانات مختلفی برای مدیریت مسیرهای برنامه (Navigation) در اختیار ما قرار می‌دهد.

از جمله:

• رفتن به صفحه جدید
• بازگشت به صفحه قبلی
• رفتن به صفحه بعدی
• Refresh کردن صفحه
• جایگزین کردن آدرس بدون اضافه شدن به History مرورگر

نحوه Import کردن

"use client";

import { useRouter } from "next/navigation";

سپس:

const router = useRouter();

از این به بعد می‌توانید از متدهای مختلف Router استفاده کنید.

چرا باید "use client" بنویسیم؟

یکی از سوالات رایج این است که چرا ابتدای فایل باید بنویسیم:

"use client";

دلیل آن این است که useRouter فقط داخل Client Component کار می‌کند.

در App Router تمام فایل‌ها به صورت پیش‌فرض Server Component هستند.

اما Router مرورگر فقط در سمت Client وجود دارد و سرور به آن دسترسی ندارد.

بنابراین اگر "use client" را ننویسید با خطایی شبیه زیر مواجه می‌شوید:

useRouter only works in Client Components.

اولین مثال

کدی که نوشته‌اید دقیقاً یکی از رایج‌ترین کاربردهای useRouter را نشان می‌دهد.

"use client";

import { useRouter } from "next/navigation";

export default function Home() {

    const router = useRouter();

    return (
        <>
            <h1>Page Home</h1>

            <button
                onClick={() => router.push("/post")}
            >
                parsa
            </button>
        </>
    );
}

در این مثال:

router.push("/post")

بعد از کلیک روی دکمه، کاربر را به صفحه

/post

منتقل می‌کند.

متد push()

رایج‌ترین متد useRouter، متد push است.

router.push("/about");

کاربر وارد صفحه

/about

می‌شود.

همچنین صفحه قبلی داخل History مرورگر ذخیره می‌شود.

به همین دلیل اگر دکمه Back مرورگر را بزنید، دوباره به صفحه قبلی برمی‌گردید.

ارسال به صفحات داینامیک

فرض کنید مسیر زیر را دارید:

/products/15

کافی است بنویسید:

router.push("/products/15");

یا به صورت داینامیک:

const id = 15;

router.push(`/products/${id}`);

انتقال بعد از Login

یکی از رایج‌ترین کاربردهای useRouter بعد از ورود کاربر است.

async function login() {

    const result = await api.login();

    if (result.success) {
        router.push("/dashboard");
    }

}

بعد از ورود موفق، کاربر وارد داشبورد می‌شود.

متد replace()

گاهی نمی‌خواهید صفحه فعلی داخل History مرورگر ذخیره شود.

در این حالت از:

router.replace("/dashboard");

استفاده می‌کنیم.

تفاوت آن با push این است که صفحه فعلی جایگزین می‌شود.

مثال:

Login
↓

Dashboard

اگر با replace بروید، دکمه Back دیگر کاربر را به صفحه Login برنمی‌گرداند.

این روش برای صفحات ورود (Login)، ثبت‌نام و پرداخت بسیار مناسب است.

متد back()

برگشت به صفحه قبلی:

router.back();

دقیقاً مانند زدن دکمه Back مرورگر است.

مثال:

<button
    onClick={() => router.back()}
>
    برگشت
</button>

متد forward()

رفتن به صفحه بعدی در History:

router.forward();

عملکردی مشابه دکمه Forward مرورگر دارد.

متد refresh()

یکی از قابلیت‌های جدید App Router.

router.refresh();

این متد صفحه را دوباره دریافت (Re-fetch) می‌کند و Server Components مجدداً رندر می‌شوند، بدون اینکه یک Reload کامل مرورگر انجام شود.

کاربردها:

• دریافت اطلاعات جدید از دیتابیس
• بروزرسانی اطلاعات بعد از ثبت فرم
• همگام‌سازی داده‌ها با سرور

تفاوت Link و useRouter

اگر فقط قصد دارید یک لینک نمایش دهید، از Link استفاده کنید.

اما اگر بعد از انجام یک عملیات قصد انتقال کاربر را دارید، از useRouter استفاده کنید.

استفاده داخل Event

یکی از مزیت‌های useRouter این است که داخل Eventها استفاده می‌شود.

<button
    onClick={() => router.push("/profile")}
>
    پروفایل
</button>

یا:

function handleClick(){

    router.push("/about");

}

استفاده بعد از ثبت فرم

async function submitForm(){

    await saveData();

    router.push("/success");

}

بعد از ثبت موفق اطلاعات، کاربر وارد صفحه موفقیت می‌شود.

اشتباه رایج

بعضی افراد تصور می‌کنند باید از

window.location.href

استفاده کنند.

مثل:

window.location.href="/post";

این روش در Next.js پیشنهاد نمی‌شود زیرا باعث Reload کامل صفحه می‌شود.

اما:

router.push("/post");

بدون Reload کامل، صفحه را تغییر می‌دهد و تجربه کاربری بسیار بهتری ارائه می‌دهد.

نکات مهم

• useRouter فقط در Client Component قابل استفاده است.
• نیاز به "use client" دارد.
• برای انتقال برنامه‌نویسی بین صفحات استفاده می‌شود.
• push() صفحه جدید را به History اضافه می‌کند.
• replace() صفحه فعلی را جایگزین می‌کند.
• back() به صفحه قبلی بازمی‌گردد.
• forward() به صفحه بعدی History می‌رود.
• refresh() داده‌های صفحه را دوباره از سرور دریافت می‌کند، بدون Reload کامل مرورگر.
• برای نمایش لینک‌های معمولی بهتر است از کامپوننت Link استفاده کنید.

جمع‌بندی

هوک useRouter یکی از مهم‌ترین ابزارهای Next.js برای مدیریت مسیرها است. هر زمان که بخواهید به‌صورت برنامه‌نویسی کاربر را به صفحه دیگری هدایت کنید، تاریخچه مرورگر را مدیریت کنید یا داده‌های صفحه را بدون Reload کامل به‌روزرسانی کنید، این هوک بهترین انتخاب است.

در کنار هوک usePathname، یادگیری useRouter بخش مهمی از مسیریابی در App Router محسوب می‌شود. معمولاً این دو هوک در کنار هم استفاده می‌شوند؛ usePathname برای تشخیص مسیر فعلی و useRouter برای تغییر مسیر و مدیریت ناوبری.