React

Les chemins dynamiques

Il est toujours à la fin de la route.
Son nommage est libre.
Il y a deux types de chemins dynamiques :

• Ci-dessus, c’est :id².
• Un autre représente les pages qui ne sont ni à la racine ni dynamiques (depuis la version 6). Il s’agit de *. Il sert en cas de page non trouvée par exemple. Depuis la version 6, les ordres de routes sont superfétatoires.
  Ce type de chemin dynamique permet de personnaliser les pages, donc de les rendre moins techniques.

Ça donne donc ça :

<Route path="*" element={<NotFound />} />

Il faut créer le composant qui peut avoir besoin de CSS.
Le code ci-après :

import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function NotFound() {
    // Le choix est de retourner à l'accueil
    const navigate = useNavigate()
    console.log(navigate);
    return (
        <div>
            <h1>Wops, je crois qu'j'me suis perdu.</h1>
            <button onClick={() => navigate('/')}>Aller à l'accueil</button>
        </div>
    )
}

Dans le bouton, c’est une fonction anonyme ().
Nonobstant, il est possible de faire une variable :

export default function NotFound() {
    // Le choix est de retourner à l'accueil
    const navigate = useNavigate()
    console.log(navigate);
    const goHome = () => {
        navigate("/")
    }
    return (
        <div>
            <h1>Wops, je crois qu'j'me suis perdu.</h1>
            <button onClick={goHome}>Aller à l'accueil</button>
        </div>
    )
}

NOTA
‘useNavigate’ est un hook de la communauté React-router.
² si :id est remplacé par * ça va matcher une infinité de dossiers imbriqués.