EnglishCommencer

Framework front : le routage

La table de routes d'une application monopage : chemin vers composant, paramètres, routes imbriquées, page introuvable, navigation par l'API History, garde d'accès et chargement différé.

  • 27 cartes
  • 6 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les étapes
  5. Mises en situation
  6. Comprendre

Quelques cartes du deck

  • Routage côté client : de quoi s'agit-il ?

    Voir la réponse

    Choix du composant à afficher d'après l'adresse, fait par le script dans le navigateur sans demander une nouvelle page au serveur.

    Le script intercepte le clic sur un lien, change l'adresse et remplace une partie de l'écran : la page ne se recharge pas.

  • Avec cette table, quelle route est choisie pour l'adresse /produits/42 ?

    ```js
    const routes = [
    { path: "/", component: Accueil },
    { path: "/produits", component: Liste },
    { path: "/produits/:id", component: Fiche },
    { path: "*", component: Introuvable },
    ];
    `

    • /produits/:id, avec id égal à "42"
    • /produits, avec 42 ignoré
    • *, car 42 n'est pas une route déclarée
    • /, la route par défaut
    Voir la réponse

    /produits/:id, avec id égal à "42"

    Le chemin doit correspondre en entier : /produits ne couvre pas /produits/42. :id capture le segment, toujours sous forme de texte. Le joker * ne sert que quand rien d'autre ne convient.

  • Dans l'API History, … ajoute une entrée à la pile d'historique, alors que … remplace l'entrée courante.

    Voir la réponse

    Dans l'API History, pushState ajoute une entrée à la pile d'historique, alors que replaceState remplace l'entrée courante.

    Ni l'un ni l'autre ne charge la page : ils ne changent que l'adresse et l'historique. Après replaceState, le retour saute l'ancienne adresse.

  • Route : de quoi s'agit-il ?

    Voir la réponse

    Association, dans la table de routage, entre un motif de chemin et le composant à afficher quand l'adresse y correspond.

    Le motif /produits/:id correspond à /produits/42 et à /produits/7 : :id est un paramètre, lu dans le composant.

  • Un clic sur un lien interne dans le routeur : quelle étape vient après « Le routeur intercepte le clic et annule la navigation par défaut » ?

    • Il appelle pushState pour changer l'adresse sans requête de page
    • Il compare l'adresse à la table de routes et choisit la route
    • Il monte le composant de la route, qui demande ses données
    • Le bouton retour, plus tard, déclenche popstate et le cycle reprend
    Voir la réponse

    Il appelle pushState pour changer l'adresse sans requête de page

    L'ordre compte : l'adresse change avant l'affichage, et le retour du navigateur passe par popstate parce que le script, lui, n'a pas appelé pushState.

Réviser ce deck