Programmatisches Routing

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 35 von 47.

<Link> deckt die Navigation ab, die der Benutzer auswählt. Aber manchmal entscheidet die App: nach dem Absenden eines Formulars, nach einer erfolgreichen Anmeldung, nach einem Button-Klick, bei dem zuerst Arbeit erledigt werden muss.

Für diese navigieren Sie aus dem Code heraus mit useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

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

Das Router-Objekt bietet Ihnen:

router.push(url): dorthin navigieren und zur Historie hinzufügen
router.replace(url): dorthin navigieren und den aktuellen Eintrag ersetzen (kein Zurückgehen dazu möglich)
router.back(): einen Schritt zurückgehen
router.refresh(): das Server-Rendering der aktuellen Route erneut ausführen

Zwei Regeln, die man sich merken sollte. Erste: useRouter stammt aus next/navigation, nicht aus dem alten next/router. Zweite: Es ist ein Hook, daher benötigt er 'use client'.

Wenn ein einfacher Link ausreicht, verwenden Sie einen Link: Es ist ein echtes <a>, sodass es mit Tastaturen, Screenreadern und Mittelklick funktioniert. Greifen Sie zu router.push, wenn die Navigation eine Konsequenz von etwas ist und nicht die Aktion selbst.

Aufgabe

Einfach

Die Startseite hat einen "Order now"-Button, der nichts tut. Lass ihn navigieren.

Hole in components/OrderButton.jsx den Router mit useRouter().
Sende den Benutzer beim Klicken mit router.push zu /menu.

Lass das id="order-btn" des Buttons unverändert: Die Tests klicken darauf.

Probier es selbst

import './globals.css';

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

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