Routing programmatico

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 35 di 47.

<Link> gestisce la navigazione che l’utente sceglie. Ma a volte decide l’app: dopo l’invio di un modulo, dopo che un accesso è riuscito, dopo aver fatto clic su un pulsante che prima deve svolgere delle operazioni.

Per questi, navighi dal codice con useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

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

L'oggetto router ti offre:

router.push(url): vai lì e aggiungilo alla cronologia
router.replace(url): vai lì, sostituendo la voce corrente (non potrai tornare indietro)
router.back(): un passo indietro
router.refresh(): esegui di nuovo il rendering sul server della route corrente

Due regole da ricordare. Primo, useRouter proviene da next/navigation, non dal vecchio next/router. Secondo, è un hook, quindi richiede 'use client'.

Quando basta un semplice link, usa un link: è un vero <a>, quindi funziona con le tastiere, gli screen reader e il clic con il tasto centrale. Usa router.push quando la navigazione è una conseguenza di qualcosa, non la cosa in sé.

Sfida

Facile

La pagina iniziale ha un pulsante "Order now" che non fa nulla. Fai in modo che navighi.

In components/OrderButton.jsx, recupera il router con useRouter().
Al clic, indirizza l’utente a /menu con router.push.

Lascia invariato l’id="order-btn" del pulsante: i test fanno clic su di esso.

Provalo tu

import './globals.css';

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

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