juin 18, 2021

Routage côté client dans Next.js —

À propos de l'auteur

Adebiyi Adedotun Lukman est un ingénieur UI/Frontend basé à Lagos, au Nigéria, qui aime aussi la conception UI/UX pour l'amour des excellents produits logiciels. Lorsque …

En savoir plus sur

Adebiyi
↬

Next.js dispose d'un système de routage basé sur des fichiers dans lequel chaque page devient automatiquement une route basée sur son nom de fichier. Chaque page est un composant React exporté par défaut à partir du répertoire des pages qui peut être utilisé pour définir les modèles de routage les plus courants. Cet article vous guidera à travers presque tout ce que vous devez savoir sur le routage dans Next.js et vous orientera vers des sujets et des concepts connexes.

Les hyperliens sont l'un des fleurons du Web depuis sa création . Selon MDN, les hyperliens sont ce qui fait du Web, un Web. Bien qu'il soit utilisé à des fins telles que la création de liens entre des documents, son utilisation principale est de référencer différentes pages Web identifiables par une adresse Web unique ou une URL.

Le routage est un aspect important de chaque application Web autant que les hyperliens sont vers le Web. C'est un mécanisme par lequel les demandes sont acheminées vers le code qui les gère. Concernant le routage, les pages Next.js sont référencées et identifiables par un chemin URL unique. Si le Web se compose de pages Web de navigation interconnectées par des hyperliensalors chaque application Next.js se compose de pages pouvant être routées (gestionnaires de route ou routes) interconnectées par un routeur.

Next.js a une prise en charge intégrée du routage qui peut être difficile à décompresser, en particulier lorsque l'on considère le rendu et la récupération de données. Comme condition préalable à la compréhension du routage côté client dans Next.js, il est nécessaire d'avoir une vue d'ensemble des concepts tels que le routage, le rendu et la récupération de données dans Next.js.

Cet article sera utile aux développeurs React qui connaissent bien avec Next.js et souhaitez apprendre comment il gère le routage. Vous devez avoir une connaissance pratique de React et Next.js pour tirer le meilleur parti de l'article, qui concerne uniquement le routage côté client et les concepts associés dans Next.js.

Routage et rendu

Routage et rendu sont complémentaires et joueront un rôle énorme tout au long de cet article. J'aime la façon dont Gaurav les explique :

Le routage est le processus par lequel l'utilisateur navigue vers différentes pages d'un site Web.
Le rendu est le processus de mise en place de ces pages. sur l'interface utilisateur. Chaque fois que vous demandez un itinéraire vers une page particulière, vous effectuez également le rendu de cette page, mais tous les rendus ne sont pas le résultat d'un itinéraire.

Prenez cinq minutes pour y réfléchir.

Ce dont vous avez besoin pour comprendre à propos du rendu dans Next.js est que chaque page est pré-rendue à l'avance avec le code JavaScript minimal nécessaire pour qu'elle devienne pleinement interactive grâce à un processus appelé hydratation. La façon dont Next.js fait cela dépend fortement de la forme de pré-rendu : Static Generation ou Server-side renderqui sont tous deux fortement couplés au technique de récupération de données utilisée, et séparée par lorsque le code HTML d'une page est généré.

En fonction de vos besoins en matière de récupération de données, vous pourriez vous retrouver à utiliser des fonctions de récupération de données intégrées telles que getStaticPropsgetStaticPaths ou, getServerSidePropsdes outils d'extraction de données côté client tels que SWR, react-query ou des approches d'extraction de données traditionnelles telles que fetch-on-render fetch-then-render render-as-you-fetch (avec Suspense).

Pré-rendu (avant rendu — à l'interface utilisateur ) est complémentaire au routage et fortement couplé à la récupération de données – un sujet à part entière dans Next.js. Ainsi, bien que ces concepts soient soit complémentaires, soit étroitement liés, cet article se concentrera uniquement sur la simple navigation entre les pages (routage), avec des références aux concepts connexes si nécessaire.

Cela étant réglé, commençons par l'essentiel. : Next.js a un routeur basé sur le système de fichiers construit sur le concept de pages.

Pages

Les pages de Next.js sont des composants React automatiquement disponibles comme itinéraires. Ils sont exportés en tant qu'exportations par défaut à partir du répertoire des pages avec les extensions de fichiers prises en charge telles que .js.jsx.ts ou .tsx.

Une application Next.js typique aura une structure de dossiers avec des répertoires de niveau supérieur tels que pagespublic et styles.

next-app
node_modules
pages
│ ├── index.js // chemin : base-url (/)
│ ├── books.jsx // chemin : /books
│ └── livre.ts // chemin : /livre
publique
styles
.gitignore
package.json
└── README.md

Chaque page est un composant React :

// pages/books.js — `base-url/book`
exporter la fonction par défaut Book() {
  revenir
}

Remarque : Gardez à l'esprit que les pages peuvent également être appelées « gestionnaires d'itinéraires ».

Pages personnalisées

Ce sont des pages spéciales qui résident dans les pages répertoire mais ne participent pas au routage. Ils sont précédés du symbole de soulignement, comme dans _app.js et _document.js.

_app.js
Il s'agit d'un composant personnalisé qui réside dans le dossier pages. Next.js utilise ce composant pour initialiser les pages.

_document.js
Comme _app.js_document.js est un composant personnalisé que Next.js utilise pour augmenter vos applications et

 tags. Cela est nécessaire car les pages Next.js ignorent la définition du balisage du document environnant.next-app
node_modules
pages
│ ├── _app.js // ⚠️ Page personnalisée (indisponible en tant qu'itinéraire)
│ ├── _document.jsx // ⚠️ Page personnalisée (indisponible en tant qu'itinéraire)
│ └── index.ts // chemin : base-url (/)
publique
styles
.gitignore
package.json
└── README.md
Lien entre les pages
Next.js expose un composant Link de l'API next/link qui peut être utilisé pour effectuer une route côté client transitions entre les pages.
// Importer le composant 
importer le lien de "suivant/lien" ;

// Cela pourrait être un composant de page
exporter la fonction par défaut TopNav() {
  revenir (
    
      Accueil
      Publications
      À propos
    
  )
}

// Cela pourrait être un composant non-page
exporter la fonction par défaut Publications() {
  revenir (
    
      
      {/* ... */}
    
  )
}
Le composant Link peut être utilisé à l'intérieur de n'importe quel composant, page ou non. Lorsqu'il est utilisé dans sa forme la plus basique comme dans l'exemple ci-dessus, le composant Link se traduit par un hyperlien avec un attribut href. (Plus d'informations sur Link dans la section suivante/lien ci-dessous.)
Routage
Le système de routage basé sur fichier Next.js peut être utilisé pour définir les modèles de route les plus courants. Pour s'adapter à ces modèles, chaque route est séparée en fonction de sa définition.
Index Routes
Par défaut, dans votre application Next.js, la route initiale/par défaut est pages/index.js  qui sert automatiquement de point de départ de votre application sous le nom /. Avec une URL de base de localhost:3000cette route d'indexation est accessible au niveau de l'URL de base de l'application dans le navigateur.
Les routes d'indexation agissent automatiquement comme route par défaut pour chaque répertoire et peuvent éliminer nommer les licenciements. La structure de répertoire ci-dessous expose deux chemins de route : / et /home.
next-app
pages
    ├── index.js // chemin : base-url (/)
    └── home.js // chemin : /home
L'élimination est plus apparente avec routes imbriquées.
Routes imbriquées
Une route comme pages/book est d'un niveau de profondeur. Aller plus loin consiste à créer des routes imbriquées, ce qui nécessite une structure de dossiers imbriqués. Avec une URL de base de https://www.smashingmagazine.comvous pouvez accéder à l'itinéraire https://www.smashingmagazine.com/printed-books/printed-books en créant une structure de dossiers similaire à celle ci-dessous :
next-app
pages
    index.js // top index route
    └── livres-imprimés // itinéraire imbriqué
        └──printed-books.js // chemin : /printed-books/printed-books
Ou éliminez la redondance des chemins avec les routes d'index et accédez à la route des livres imprimés sur https://www.smashingmagazine.com /livres-imprimés.
next-app
pages
    index.js // top index route
    └── livres-imprimés // parcours imbriqué
        └── index.js // chemin : /printed-books
Les routes dynamiques jouent également un rôle important dans l'élimination des redondances.
Les routes dynamiques
 À partir de l'exemple précédent, nous utilisons la route d'index pour accéder à tous les livres imprimés. Pour accéder à des livres individuels, il faut soit créer des itinéraires différents pour chaque livre comme :
// ️ Ne faites pas ça.
application suivante
pages
    ├── index.js // top index route
    └── livres-imprimés // itinéraire imbriqué
        ├── index.js // chemin : /printed-books
        ├── typesript-in-50-lessons.js // chemin: /printed-books/typesript-in-50-lessons
        ├── checklist-cards.js // chemin : /printed-books/checklist-cards
        ├──ethical-design-handbook.js // chemin: /printed-books/ethical-design-handbook
        ├── inclus-components.js // chemin : /printed-books/inclusive-components
        └── click.js // chemin : /printed-books/click
 qui est hautement redondant, non évolutif et peut être corrigé avec des routes dynamiques telles que :
// Faites ceci à la place.
application suivante
pages
    index.js // top index route
    └── livres imprimés
        ├── index.js // chemin : /printed-books
        └── [book-id].js // chemin : /printed-books/:book-id
La syntaxe des crochets — [book-id] — est le segment dynamiqueet ne se limite pas aux fichiers seuls . Il peut également être utilisé avec des dossiers comme l'exemple ci-dessous, rendant l'auteur disponible sur la route /printed-books/:book-id/author.
next-app
pages
    ├── index.js // top index route
    └── livres imprimés
        ├── index.js // chemin : /printed-books
        [book-id]
            author.js // chemin : /printed-books/:book-id/author
Le ou les segments dynamiques d'un itinéraire sont exposés en tant que paramètre de requête accessible dans n'importe quel composant de connexion impliqué dans la route avec l'objet query du hook useRouter() — (Plus d'informations à ce sujet dans la section API next/router).
//printed-books/:book- identifiant
importer { useRouter } depuis 'next/router' ;

exporter la fonction par défaut Book() {
  const { requête } = useRouter();

  revenir (
    
      
        book-id {query['book-id']}
      
    
  );
}
// /livres-imprimés/:book-id/author
importer { useRouter } depuis 'next/router' ;

exporter la fonction par défaut Auteur() {
  const { requête } = useRouter();

  revenir (
    
      
        Récupérer l'auteur avec l'identifiant du livre {query['book-id']}
      
    
  );
}
Extension des segments de route dynamique avec Catch All Routes
Vous avez vu la syntaxe de support de segment de route dynamique comme dans l'exemple précédent avec [book-id].js. La beauté de cette syntaxe est qu'elle va encore plus loin avec Catch-All Routes. Vous pouvez déduire ce que cela fait du nom : il capture toutes les routes.
Lorsque nous avons examiné l'exemple dynamique, nous avons appris comment cela aide à éliminer la redondance de création de fichiers pour qu'une seule route puisse accéder à plusieurs livres avec leur ID. Mais nous aurions pu faire autre chose.
Plus précisément, nous avions le chemin /printed-books/:book-idavec une structure de répertoire :
next-app
pages
    index.js
    └── livres imprimés
        index.js
        └── [book-id].js
Si nous avons mis à jour le chemin pour avoir plus de segments comme des catégories, nous pourrions nous retrouver avec quelque chose comme : /printed-books/design/:book-id/printed-books/engineering/:book-idou mieux encore /printed-books/:category/:book-id.
Ajoutons l'année de parution : /printed-books/:category/:release-year/:book-id. Est-ce que vous pouvez voir un motif? La structure du répertoire devient :
next-app
pages
    index.js
    └── livres imprimés
        [category]
            [release-year]
                └── [book-id].js
 Nous avons substitué l'utilisation de fichiers nommés aux routes dynamiques, mais nous nous sommes retrouvés d'une manière ou d'une autre avec une autre forme de redondance. Eh bien, il existe un correctif : Catch All Routes qui élimine le besoin de routes profondément imbriquées :
next-app
pages
    index.js
    └── livres imprimés
        └── [...slug].js
Il utilise la même syntaxe entre crochets, sauf qu'il est préfixé par trois points. Pensez aux points comme la syntaxe de propagation JavaScript. Vous vous demandez peut-être : si j'utilise les routes fourre-tout, comment puis-je accéder à la catégorie ([category]) et à l'année de sortie ([release-year]). Deux manières :
Dans le cas de l'exemple des livres imprimés, l'objectif final est le livre, et chaque information de livre aura ses métadonnées associées, ou
Les segments « slug » sont renvoyés sous forme de tableau de paramètre(s) de requête.
import { useRouter } depuis 'next/router' ;

exporter la fonction par défaut Book() {
  const { requête } = useRouter();
  // Il y a un bref moment où `slug` n'est pas défini
  // nous utilisons donc l'opérateur de chaînage facultatif (?.) et de fusion nulle (??)
  // pour vérifier si slug n'est pas défini, puis revenir à un tableau vide
  const [category, releaseYear, bookId] = requête?.slug ?? [];

  revenir (
    
      
        
          Id du livre
          {bookId}
        
        
          Catégorie
          {category}
        
        
          Année de sortie
          {releaseYear}
        
      
    
  );
}
Voici d'autres exemples pour la route /printed-books/[…slug] :
Path Query parameter
/printed-books/click.js { « slug » : [“click”] }
/printed-books/2020/click.js { "slug": [“2020”, “click”] }
/printed-books/design/2020/click.js { "slug ” : [“design”, “2020”, “click”] }
Comme c'est le cas avec la route fourre-tout, la route /printed-books générera une erreur 404 à moins que vous ne fournissiez une route d'index de secours.
next-app
pages
    index.js
    └── livres imprimés
        ├── index.js // chemin : /printed-books
        └── [...slug].js
C'est parce que la route fourre-tout est « stricte ». Soit il correspond à un slug, soit il renvoie une erreur. Si vous souhaitez éviter de créer des routes d'index à côté des routes fourre-tout, vous pouvez utiliser les routes fourre-tout facultatives à la place.
Extension des segments de route dynamiques avec des routes fourre-tout facultatives
Le la syntaxe est la même que pour les routes fourre-tout, mais avec des doubles crochets à la place.
next-app
pages
    index.js
    └── livres imprimés
        └── [[...slug]].js
Dans ce cas, la route fourre-tout (slug) est facultative et si elle n'est pas disponible, les solutions de secours vers le chemin /printed-booksrendues avec [[…slug]].js gestionnaire de route, sans aucun paramètre de requête.
Utilisez le catch-all avec les routes d'index, ou les routes catch-all facultatives seules. Évitez d'utiliser des routes fourre-tout et des routes fourre-tout facultatives à côté.
 Priorité des routes
 La capacité de définir les modèles de routage les plus courants peut être un « cygne noir ». La possibilité de conflits de routes est une menace imminente, surtout lorsque vous commencez à créer des routes dynamiques.
 Lorsque cela a du sens, Next.js vous informe des conflits de routes sous la forme d'erreurs. Dans le cas contraire, il applique la priorité aux routes en fonction de leur spécificité.
Par exemple, c'est une erreur d'avoir plusieurs routes dynamiques au même niveau.
// ❌ Ceci est une erreur.
// Échec du rechargement des routes dynamiques : Erreur : Vous ne pouvez pas utiliser des noms de slug différents pour // le même chemin dynamique ('book-id' !== 'id').
application suivante
pages
    index.js
    └── livres imprimés
        [book-id].js
        └── [id].js
Si vous regardez attentivement les routes définies ci-dessous, vous remarquerez le potentiel de conflits.
// Structure de répertoire aplatie pour plus de simplicité.
application suivante
pages
    ├── index.js // index route (également une route prédéfinie)
    └── livres imprimés
        index.js
        ├── tags.js // itinéraire prédéfini
        ├── [book-id].js // gère la route dynamique
        └── [...slug].js // handles catch all route
Par exemple, essayez de répondre à ceci : quelle route gère le chemin /printed-books/inclusive-components?
/printed- books/[book-id].jsou
/printed-books/[…slug].js.
 La réponse réside dans la « spécificité » des gestionnaires de routes. Les routes prédéfinies viennent en premier, suivies des routes dynamiques, puis des routes fourre-tout. Vous pouvez considérer le modèle de demande/gestion de route comme un pseudo-code avec les étapes suivantes :
 Existe-t-il un gestionnaire de route prédéfini qui peut gérer la route ?true — gérer la demande de route.
false — aller à 2.
 Existe-t-il un gestionnaire de route dynamique qui peut gérer la route ?true — gérer la demande de route.
false — aller à 3.
 Existe-t-il un gestionnaire de route fourre-tout qui peut gérer la route ?true — gérer la demande de route.
false — lancer une page 404 introuvable.
 Par conséquent, /printed-books/[book-id].js gagne .
Voici d'autres exemples :
Route Route handler Type of route
/printed-books /printed-books Index route
/ printed-books/tags /printed-books/tags.js Itinéraire prédéfini
/printed-books/inclusive-components /printed-books/[book-id]. js Route dynamique
/printed-books/design/inclusive-components /printed-books/[...slug].js Route fourre-tout
Le suivant API /link
L'API next/link expose le composant Link comme moyen déclaratif d'effectuer des transitions de route côté client.
import Link from 'next /relier'

fonction TopNav() {
  revenir (
    
      Magazine Smashing
      Articles
      Guides
      Livres
    
  )
}
Le composant Link se résoudra en un lien hypertexte HTML normal. Autrement dit, Smashing Magazine se résoudra en Smashing Magazine.
Le prop href est le seul prop requis pour le composant Link . Voir docs pour une liste complète des accessoires disponibles sur le composant Link.
Il existe d'autres mécanismes du composant Link à connaître.[19659169]Routes avec segments dynamiques
Avant Next.js 9.5.3, Lienant aux routes dynamiques signifiait que vous deviez fournir à la fois le href et as prop à Link comme dans :
import Link from 'next/link' ;

const impriméLivres = [
  { name: 'Ethical Design', id: 'ethical-design' },
  { name: 'Design Systems', id: 'design-systems' },
];

fonction d'exportation par défaut PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    
      {printedBook.name}
    
  ));
}
Bien que cela ait permis à Next.js d'interpoler le href pour les paramètres dynamiques, c'était fastidieux, sujet aux erreurs et quelque peu impératif, et a maintenant été corrigé pour la majorité des cas d'utilisation avec la sortie de Next.js 10.
Ce correctif est également rétrocompatible. Si vous avez utilisé à la fois as et hrefrien ne se casse. Pour adopter la nouvelle syntaxe, supprimez la prop href et sa valeur, et renommez la prop as en href comme dans l'exemple ci-dessous :
import Link de « suivant/lien » ;

const impriméLivres = [
  { name: 'Ethical Design', id: 'ethical-design' },
  { name: 'Design Systems', id: 'design-systems' },
];

fonction d'exportation par défaut PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    {printedBook.name}
  ));
}
Voir Résolution automatique de href.
Use-cases For The passHref Prop
Regardez attentivement l'extrait ci-dessous :
import Link from « suivant/lien » ;

const impriméLivres = [
  { name: 'Ethical Design', id: 'ethical-design' },
  { name: 'Design Systems', id: 'design-systems' },
];

// Disons que cela a une sorte de style de base attaché
fonction CustomLink ({ href, nom }) {
  retourner {nom} ;
}

fonction d'exportation par défaut de PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    
      
    
  ));
}
Les propriétés passHref forcent le composant Link à transmettre la propriété href au composant enfant CustomLink. Ceci est obligatoire si le composant Link s'enroule sur un composant qui renvoie une balise de lien hypertexte  . Votre cas d'utilisation peut être dû au fait que vous utilisez une bibliothèque telle que styled-components, ou si vous devez transmettre plusieurs enfants au composant Linkcar il n'attend qu'un seul enfant.
Voir docs pour en savoir plus.
Objets URL
La prop href du composant Link peut également être un objet URL avec propriétés telles que query qui est automatiquement formatée dans une chaîne d'URL.
Avec l'objet printedBooksl'exemple ci-dessous sera lié à :
/printed-books/ ethical-design?name=Ethical+Design et
/printed-books/design-systems?name=Design+Systems.
import Link from 'next/link';

const impriméLivres = [
  { name: 'Ethical Design', id: 'ethical-design' },
  { name: 'Design Systems', id: 'design-systems' },
];

fonction d'exportation par défaut PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    
      {printedBook.name}
    
  ));
}
Si vous incluez un segment dynamique dans le cheminvous devez également l'inclure en tant que propriété dans l'objet de requête pour vous assurer que la requête est interpolée dans le chemin :
 importer le lien depuis 'suivant/lien' ;

const impriméLivres = [
  { name: 'Ethical Design', id: 'ethical-design' },
  { name: 'Design Systems', id: 'design-systems' },
];

// Dans ce cas, le segment dynamique `[book-id]` dans le chemin
// mappe directement sur le paramètre de requête `book-id`
fonction d'exportation par défaut de PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    
      {printedBook.name}
    
  ));
}
L'exemple ci-dessus a des chemins :
/printed-books/ethical-designet
/printed-books/design-systems.
Si vous inspectez l'attribut href dans VSCode, vous trouverez le type LinkPropsavec la propriété href un type Urlqui est soit un string ou UrlObject comme mentionné précédemment.
  Inspecting LinkProps dans VSCode. ( Grand aperçu)
L'inspection de l'UrlObject mène en outre à l'interface avec les propriétés :
 <img loading="lazy" decoding="async" importance="low" width="800" height="596 " srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e- 3c10-4cc8-b386-c8237a0f8cfd/2-client-side-routing-next-js.png 400w,
 https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e-3c10-4cc8- b386-c8237a0f8cfd/2-client-side-routing-next-js.png 800w,
 https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e-3c10-4cc8- b386-c8237a0f8cfd/2-client-side-routing-next-js.png 1200w,
 https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e-3c10-4cc8- b386-c8237a0f8cfd/2-client-side-routing-next-js.png 1600w,
 https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e-3c10-4cc8- b386-c8237a0f8cfd/2-client-side-routing-next-js.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud. netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f943f3e-3c10-4cc8-b386-c8237a0f8cfd/2-client-side-routing-next-js.png" tailles="100vw" alt capture d'écran de l'UrlObject inspecté dans VSCode »/> Inspecting UrlObject dans VSCode. ( Grand aperçu)
Vous pouvez en savoir plus sur ces propriétés dans la Documentation du module URL Node.js.
Un cas d'utilisation du hachage consiste à créer un lien vers des sections spécifiques d'une page.
Importer le lien depuis « suivant/lien » ;

const impriméLivres = [{ name: 'Ethical Design', id: 'ethical-design' }];

fonction d'exportation par défaut de PrintedBooks() {
  return Livresimprimés.map((Livreimprimé) => (
    
      {printedBook.name}
    
  ));
}
Le lien hypertexte se résoudra à /printed-books/ethical-design#faq.
En savoir plus dans la doc.
L'API next/router
Si le next/link est déclaratif, alors le next/router est impératif. Il expose un hook useRouter qui permet d'accéder à l'objet router à l'intérieur de n'importe quel composant de fonction. Vous pouvez utiliser ce hook pour effectuer manuellement le routage, plus particulièrement dans certains scénarios où le next/link n'est pas suffisant, ou lorsque vous devez « accrocher » au routage.
import { useRouter } from « suivant/routeur » ;

exporter la fonction par défaut Home() {
  const router = useRouter();

  fonction handleClick(e) {
    e.preventDefault();
    router.push(href);
  }

  revenir (
    
  )
}
useRouter est un hook React et ne peut pas être utilisé avec des classes. Besoin de l'objet router dans les composants de classe ? Utilisez withRouter.
import { withRouter } depuis 'next/router' ;

function Accueil({routeur}) {
  fonction poignéeClic(e) {
    e.preventDefault();
    router.push(href);
  }

  revenir (
    
  )
}

export default withRouter(Home);
L'objet router
Le hook useRouter et le composant d'ordre supérieur withRouter renvoient un objet routeur avec des propriétés telles que pathnamequeryasPath et basePath qui vous donnent des informations sur l'état de l'URL de la page actuelle,  localelocales et defaultLocale qui donnent des informations sur les paramètres régionaux par défaut actifs, pris en charge ou actuels.
L'objet routeur a également des méthodes telles que push pour naviguer vers une nouvelle URL en ajoutant une nouvelle entrée d'URL dans la pile d'historique, replacesimilaire à push mais remplace l'URL actuelle au lieu d'ajouter une nouvelle entrée d'URL dans la pile d'historique.
 En savoir plus sur l'objet routeur .
Configuration de route personnalisée avec suivant .config.js
Il s'agit d'un module Node.js standard qui peut être utilisé pour configurer certains comportements de Next.js.
module.exports = {
  // options de configuration
}
N'oubliez pas de redémarrer votre serveur chaque fois que vous mettez à jour next.config.js. En savoir plus.
Base Path
Il a été mentionné que la route initiale/par défaut dans Next.js est pages/index.js avec le chemin /. Ceci est configurable et vous pouvez faire de votre route par défaut un sous-chemin du domaine.
module.exports = {
  // ancien chemin par défaut : /
  // nouveau chemin par défaut : /dashboard
  chemin de base : '/tableau de bord',
};
Ces modifications prendront automatiquement effet dans votre application avec tous les chemins / acheminés vers /dashboard.
Cette fonctionnalité ne peut être utilisée qu'avec Next.js 9.5 et versions ultérieures. En savoir plus.
Trailing Slash
Par défaut, une barre oblique ne sera pas disponible à la fin de chaque URL. Cependant, vous pouvez changer cela avec :
module.exports = {
  trailingSlash : vrai
};
# trailingSlash : false
/livres-imprimés/design-ethique#faq
# trailingSlash : vrai
/printed-books/ethical-design/#faq
Les fonctionnalités base path et trailing slash ne peuvent être utilisées qu'avec Next.js 9.5 et versions ultérieures.
Conclusion
 Le routage est l'une des parties les plus importantes de votre application Next.js, et il se reflète dans le routeur basé sur le système de fichiers basé sur le concept de pages. Les pages peuvent être utilisées pour définir les schémas d'itinéraire les plus courants. Les concepts de routage et de rendu sont étroitement liés. Prenez les leçons de cet article avec vous lorsque vous créez votre propre application Next.js ou travaillez sur une base de code Next.js. Et consultez les ressources ci-dessous pour en savoir plus.
Related Resources
 (vf, yk, il)[19659235]
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

Route	Route handler	Type of route
`/printed-books`	`/printed-books`	Index route
`/ printed-books/tags`	`/printed-books/tags.js`	Itinéraire prédéfini
`/printed-books/inclusive-components`	`/printed-books/[book-id]. js`	Route dynamique
`/printed-books/design/inclusive-components`	`/printed-books/[...slug].js`	Route fourre-tout

Blog ARC Optimizer

juin 18, 2021

Routage côté client dans Next.js —

À propos de l'auteur

Routage et rendu

Pages

Pages personnalisées

Lien entre les pages

Routage

Index Routes

Routes imbriquées

Les routes dynamiques

book-id {query['book-id']}

Récupérer l'auteur avec l'identifiant du livre {query['book-id']}

Extension des segments de route dynamique avec Catch All Routes

Extension des segments de route dynamiques avec des routes fourre-tout facultatives

Priorité des routes

Le `suivant API /link`

Use-cases For The `passHref` Prop

Objets URL

L'API `next/router`

L'objet `router`

Configuration de route personnalisée avec `suivant .config.js`

Base Path

Trailing Slash

Conclusion

Articles similaires