ניתוב באמצעות קוד

חלק מהיחידה היסודות של 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.push(url): מעבר לשם והוספה להיסטוריה
router.replace(url): מעבר לשם והחלפת הרשומה הנוכחית (אי אפשר לחזור אליה)
router.back(): צעד אחד אחורה
router.refresh(): הרצה מחדש של עיבוד השרת עבור הנתיב הנוכחי

שני כללים שכדאי לזכור. ראשית, useRouter מגיע מ־next/navigation, ולא מ־next/router הישן. שנית, זו פעולת hook, ולכן היא זקוקה ל־'use client'.

כשקישור פשוט מספיק, השתמשו בקישור: זהו <a> אמיתי, ולכן הוא עובד עם מקלדות, קוראי מסך ולחיצה עם הכפתור האמצעי. השתמשו ב־router.push כשהניווט הוא תוצאה של משהו, ולא הדבר עצמו.

אתגר

קל

בדף הבית יש כפתור "Order now" שלא עושה כלום. גרמו לו לנווט.

בקובץ components/OrderButton.jsx, קבלו את הנתב באמצעות 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>
    );
}