Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Une application à page unique (SPA) est un site Web ou une application Web qui réécrit dynamiquement une page Web existante avec de nouvelles informations provenant du serveur Web.

Dans une application React, les composants récupèrent le contenu du site et le rendent dans un seul fichier HTML de votre projet.

React Router vous aide à naviguer vers le composant de votre choix et le restitue dans le fichier HTML. Pour l'utiliser, vous devez savoir comment configurer et intégrer React Router à votre application React.

Comment installer le routeur React

Pour installer React Router dans votre projet React en utilisant npm, le gestionnaire de packages JavaScript, exécutez la commande suivante dans le répertoire de votre projet :

npm je réagis-routeur-dom

Vous pouvez également télécharger le package à l'aide de Yarn, un gestionnaire de packages qui vous permet d'installer des packages de bibliothèque hors ligne.

instagram viewer

Pour installer React Router à l'aide de Yarn, exécutez cette commande :

fil ajouter réagir-routeur-dom @ 6

Configuration du routeur React

Pour configurer React Router et le rendre disponible dans votre application, importez NavigateurRouteur depuis réagir-routeur-dom à l'intérieur de votre index.js fichier, puis encapsulez votre composant d'application dans le NavigateurRouteur élément:

importer Réagir depuis'réagir';
importer RéagirDOM depuis'réagir-dom/client'; 
importer Application depuis'./Application';
importer { NavigateurRouter } depuis'réagir-routeur-dom';
constante root = ReactDOM.createRoot( document.getElementById('racine') );
root.render(


 </BrowserRouter>
);

Envelopper le composant d'application dans le NavigateurRouteur L'élément donne à l'ensemble de l'application un accès complet aux capacités du routeur.

Routage vers d'autres composants

Après avoir configuré votre routeur dans votre application, vous devez continuer et créer les composants de votre application, les acheminer et les rendre. Le code suivant importe et crée des composants nommés "Accueil", "À propos" et "Blog". Il importe également le Itinéraire et Itinéraires éléments de réagir-routeur-dom.

Vous définirez vos Routes à l'intérieur du Application composant:

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom';
importer Maison depuis'./Maison';
importer À propos depuis'./À propos de';
importer Blog depuis'./Blog';
fonctionApplication() {
retour (

'/' élément={ } />
'/à propos de' élément={ } />
'/Blog' élément={ }/>
 </Routes>
 )
}


exporterdéfaut application ;

Le Application component est le composant principal qui restitue tout le code que vous avez écrit dans vos autres composants.

Le Itinéraires L'élément est l'élément parent qui encapsule les itinéraires individuels que vous créez dans votre composant d'application. Le Itinéraire L'élément crée une route unique. Il prend deux attributs prop: un chemin Et un élément.

Le chemin L'attribut définit le chemin d'URL du composant prévu. La première Route dans le bloc de code ci-dessus utilise une barre oblique inverse (/) comme chemin. Il s'agit d'un itinéraire spécial que React affichera en premier, donc le Maison le composant s'affiche lorsque vous exécutez votre application. Ne confondez pas ce système avec implémenter le rendu conditionnel dans vos composants React. Vous pouvez donner ceci chemin attribuez le nom de votre choix.

Le élément L'attribut définit le composant que le Itinéraire rendra.

Le lien Le composant est un composant React Router utilisé pour parcourir différentes routes. Ces composants accèdent aux différentes routes que vous avez créées.

Par exemple:

importer { Lien } depuis'réagir-routeur-dom';
fonctionMaison() {
retour (




'/à propos de'>Page A propos</Link>
'/Blog'>Blogue</Link>
Ceci est la page d'accueil
 </div>
 )
}


exporterdéfaut Maison;

Le lien le composant est presque identique à la balise d'ancrage HTML, il utilise simplement un attribut nommé "to" au lieu de "href". Le lien Le composant navigue vers la Route avec le nom de chemin correspondant comme attribut et rend le composant de la Route.

Routage imbriqué et comment l'implémenter

Le routeur React prend en charge le routage imbriqué, vous permettant d'encapsuler plusieurs routes dans une seule route. Ceci est principalement utilisé lorsqu'il existe une certaine similitude dans les chemins d'URL des routes.

Une fois que vous avez créé les composants que vous souhaitez router, vous développerez des Routes individuelles pour chacun d'eux dans le application composant.

Par exemple:

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom'; 
importer Des articles depuis'./Des articles';
importer Nouvel article depuis'./Nouvel article';
importer ArticleUn depuis'./ArticleUn';
fonctionApplication() {
retour (

'/article' élément={ }/>
'/article/nouveau' élément={ }/>
'/Article 1' élément={ }/>
 </Routes>
 )
}
exporterdéfaut application ;

Le bloc de code ci-dessus importe et route les composants créés Des articles, Nouvel article, et ArticleUn. Il existe certaines similitudes dans les chemins d'URL entre les trois routes.

Le Nouvel article Le chemin d'accès de la route commence de la même manière que le Des articles Le chemin d'accès de la route, avec une barre oblique inverse (/) et le mot "nouveau", c'est-à-dire (/nouveau). La seule différence entre les noms de chemin des Des articles Itinéraire et le ArticleUn Route est la barre oblique (/1) à la fin du ArticleUn chemin d'accès du composant.

Vous pouvez imbriquer les trois routes plutôt que de les laisser dans leur état actuel.

Ainsi:

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom';
importer Des articles depuis'./Des articles';
importer Nouvel article depuis'./Nouvel article';
importer ArticleUn depuis'./ArticleUn';
fonctionApplication() {
retour (

'/article'>
 }/>
'/article/nouveau' élément={ }/>
'/Article 1' élément={ }/>
 </Route>
 </Routes>
 )
}
exporterdéfaut application ;

Vous avez regroupé les trois Routes individuelles en une seule Itinéraire élément. Notez que le parent Itinéraire l'élément n'a que le chemin attribut et non élément attribut qui définit le composant à rendre. Le indice attribut dans le premier enfant Itinéraire élément spécifie que cet élément Itinéraire s'affiche lorsque vous naviguez vers le chemin de l'URL du parent Itinéraire.

Pour rendre votre code meilleur et plus maintenable, vous devez définir vos Routes dans un composant et l'importer dans le application composant à utiliser.

Par exemple:

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom';
importer Des articles depuis'./Des articles';
importer Nouvel article depuis'./Nouvel article';
importer ArticleUn depuis'./ArticleUn';
fonctionArticleRoutes() {
retour (

 }/>
'/article/nouveau' élément={ }/>
'/Article 1' élément={ }/>
 </Routes>
 )
}
exporterdéfaut ArticleRoutes ;

Le composant dans le bloc de code ci-dessus contient les routes imbriquées qui se trouvaient auparavant dans le composant de l'application. Après avoir créé le composant, vous devez l'importer dans le application composant et acheminez-le à l'aide d'un seul Itinéraire élément.

Par exemple:

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom';
importer ArticleRoutes depuis'./ArticleRoutes';
fonctionApplication() {
retour (

'/article/*' élément={ }>
 </Routes>
 )
}
exporterdéfaut application ;

Dans la finale Itinéraire composant, les symboles de barre oblique inverse et d'astérisque ajoutés à la fin du nom de chemin de la Route garantissent que le nom de chemin correspond à tout nom de chemin commençant par (/article).

Il y a plus à React Router

Vous devriez maintenant être familiarisé avec les bases de la création d'applications d'une seule page dans React.js, à l'aide de React Router.

Il existe de nombreuses autres fonctionnalités disponibles dans la bibliothèque React Router qui rendent l'expérience du développeur plus dynamique lors de la création d'applications Web.