Routage programmatique

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 35 sur 47.

<Link> couvre la navigation que l'utilisateur choisit. Mais parfois, c'est l'application qui décide : après la soumission d'un formulaire, après une connexion réussie, après le clic sur un bouton qui a du travail à faire au préalable.

Pour ceux-ci, vous naviguez depuis le code avec 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'objet router vous offre :

router.push(url) : s'y rendre, et l'ajouter à l'historique
router.replace(url) : s'y rendre, en remplaçant l'entrée actuelle (impossible de y revenir)
router.back() : un pas en arrière
router.refresh() : réexécuter le rendu serveur de la route actuelle

Deux règles méritent d'être retenues. Premièrement, useRouter provient de next/navigation, et non de l'ancien next/router. Deuxièmement, c'est un hook, il nécessite donc 'use client'.

Lorsqu'un simple lien suffit, utilisez un lien : c'est un véritable <a>, il fonctionne donc avec les claviers, les lecteurs d'écran et le clic central. Utilisez router.push lorsque la navigation est la conséquence d'une action, et non l'action elle-même.

Défi

Facile

La page d'accueil possède un bouton "Order now" qui ne fait rien. Faites-en sorte qu'il permette de naviguer.

Dans components/OrderButton.jsx, obtenez le routeur avec useRouter().
Au clic, redirigez l'utilisateur vers /menu avec router.push.

Laissez l'attribut du bouton id="order-btn" tel quel : les tests cliquent dessus.

Essayez vous-même

import './globals.css';

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

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