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 fournit :

router.push(url) : y aller et l’ajouter à l’historique
router.replace(url) : y aller en remplaçant l’entrée actuelle (impossible d’y revenir en arrière)
router.back() : revenir d’une étape en arrière
router.refresh() : relancer le rendu côté 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 comporte un bouton « Order now » qui ne fait rien. Faites-le naviguer.

Dans components/OrderButton.jsx, récupérez le routeur avec useRouter().
Lors du clic, redirigez l’utilisateur vers /menu avec router.push.

Laissez l’id="order-btn" du bouton 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>
    );
}