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: nachdem ein Formular gesendet wurde, nachdem eine Anmeldung erfolgreich war, nach einem Klick auf eine Schaltfläche, die zuerst eine Aufgabe erledigen 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 dir:

router.push(url): dorthin gehen und den Eintrag zum Verlauf hinzufügen
router.replace(url): dorthin gehen und dabei den aktuellen Eintrag ersetzen (kein Zurückgehen dorthin)
router.back(): einen Schritt zurück
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, verwende einen Link: Er ist ein echtes <a>-Element und funktioniert daher mit Tastaturen, Screenreadern und dem Klicken mit der mittleren Maustaste. Verwende router.push, wenn die Navigation eine Folge von etwas ist und nicht die Sache selbst.

Aufgabe

Einfach

Die Startseite hat eine Schaltfläche „Jetzt bestellen“, die nichts tut. Sorge dafür, dass sie navigiert.

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

Lass die id="order-btn" der Schaltfläche 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>
    );
}