Routing programowy

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 35 z 47.

<Link> obsługuje nawigację, którą użytkownik wybiera. Czasami jednak to aplikacja podejmuje decyzję: po wysłaniu formularza, po udanym logowaniu albo po kliknięciu przycisku, który najpierw musi wykonać jakieś zadanie.

W przypadku tych elementów nawigujesz z poziomu kodu za pomocą useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

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

Obiekt routera umożliwia:

router.push(url): przejście pod wskazany adres i dodanie go do historii
router.replace(url): przejście pod wskazany adres i zastąpienie bieżącego wpisu (bez możliwości powrotu do niego)
router.back(): cofnięcie się o jeden krok
router.refresh(): ponowne renderowanie po stronie serwera bieżącej trasy

Dwie zasady, o których warto pamiętać. Po pierwsze, useRouter pochodzi z next/navigation, a nie ze starego next/router. Po drugie, to hook, więc wymaga 'use client'.

Gdy wystarczy zwykły link, użyj linku: to prawdziwy element <a>, więc działa z klawiaturą, czytnikami ekranu i kliknięciem środkowym przyciskiem myszy. Sięgnij po router.push, gdy nawigacja jest konsekwencją czegoś, a nie celem samym w sobie.

Wyzwanie

Łatwy

Na stronie głównej znajduje się przycisk „Order now”, który nic nie robi. Spraw, aby nawigował.

W pliku components/OrderButton.jsx pobierz router za pomocą useRouter().
Po kliknięciu przekieruj użytkownika do /menu za pomocą router.push.

Nie zmieniaj atrybutu id="order-btn" przycisku: testy klikają go.

Spróbuj swoich sił

import './globals.css';

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

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