التوجيه البرمجي

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 35 من 47.

يغطي <Link> التنقل الذي يختاره المستخدم. ولكن في بعض الأحيان يتخذ التطبيق القرار: بعد إرسال نموذج، أو بعد نجاح تسجيل الدخول، أو بعد النقر على زر يتطلب القيام بعمل ما أولاً.

بالنسبة لتلك الحالات، يمكنك التنقل من خلال الكود باستخدام useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

    return (
        <button onClick={() => router.push('/thanks')}>
            Check out
        </button>
    );
}

يوفر لك كائن router ما يلي:

router.push(url): الانتقال إلى هناك، وإضافته إلى السجل (history)
router.replace(url): الانتقال إلى هناك، مع استبدال الإدخال الحالي (لا يمكن العودة إليه)
router.back(): خطوة واحدة إلى الخلف
router.refresh(): وإعادة تشغيل التقديم الخاص بالسيرفر (server render) للمسار الحالي

قاعدتان تستحقان التذكر. أولاً، useRouter يأتي من next/navigation، وليس من next/router القديم. ثانياً، إنه hook، لذا يلزمه 'use client'.

عندما يكون الرابط العادي كافيًا، استخدم رابطًا: فهو عنصر <a> حقيقي، لذا فهو يعمل مع لوحات المفاتيح، ومقارئات الشاشة، والنقر بزر الماوس الأوسط. استخدم router.push عندما يكون التنقل نتيجة لشيء ما، وليس هو الشيء نفسه.

التحدي

سهل

تحتوي الصفحة الرئيسية على زر "Order now" لا يفعل أي شيء. اجعله يقوم بالتنقل.

في components/OrderButton.jsx، احصل على الـ router باستخدام useRouter().
عند النقر، وجه المستخدم إلى /menu باستخدام router.push.

اترك id="order-btn" الخاص بالزر كما هو: فالاختبارات تقوم بالنقر عليه.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}