Le routage dans ReactJS

Introduction

Dans une application web, le routage est un processus qui consiste à lier une URL web à une ressource spécifique dans l'application web. Dans React, il s'agit de lier une URL à un composant. React ne prend pas en charge le routage de manière native, car il s'agit essentiellement d'une bibliothèque d'interface utilisateur. La communauté React fournit de nombreux composants tiers pour gérer le routage dans l'application React. Nous allons découvrir React Router, une bibliothèque de routage de premier choix pour les applications React.

Installer React Router

Voyons comment installer le composant React Router dans notre application Expense Manager.

Ouvrez une invite de commande et allez dans le dossier racine de notre application.

cd /go/to/expense/manager

Install the react router using below command.

npm install react-router-dom --save

Concept

Le routeur React fournit quatre composants pour gérer la navigation dans une application React.

• Router − Le routeur est le composant de premier niveau. Il englobe l'ensemble de l'application.
• Link − Similaire à la balise anchor en html. Elle définit l'url cible ainsi que le texte de référence.

<Link to="/">Home</Link>

Ici, l'attribut to est utilisé pour définir l'url cible.

Switch & Route - Les deux sont utilisés ensemble. Ils font correspondre l'url cible au composant. Switch est le composant parent et Route est le composant enfant. Le composant Switch peut avoir plusieurs composants Route et chaque composant Route fait correspondre une url particulière à un composant.

<Switch>
    <Route exact path="/">
        <Home />
    </Route>
    <Route path="/home">
        <Home />
    </Route>
    <Route path="/list">
        <ExpenseEntryItemList />
    </Route>
</Switch>

Ici, l'attribut path est utilisé pour faire correspondre l'url. Fondamentalement, Switch fonctionne de manière similaire à l'instruction switch traditionnelle dans un langage de programmation. Il fait correspondre l'url cible avec chaque route enfant (attribut path) une par une dans l'ordre et invoque la première route trouvée.

Avec le composant routeur, le routeur React fournit une option pour définir et obtenir des informations dynamiques à partir de l'url. Par exemple, dans un site web d'articles, l'url peut avoir le type d'article attaché à lui et le type d'article doit être dynamiquement extrait et doit être utilisé pour récupérer le type spécifique d'articles.

<Link to="/article/c">C Programming</Link>
<Link to="/article/java">Java Programming</Link>

...
...

<Switch>
    <Route path="article/:tag" children={<ArticleList />} />
</Switch>

Ensuite, dans le composant enfant (composant de classe),

import { withRouter } from "react-router"

class ArticleList extends React.Component {
    ...
    ...
    static getDerivedStateFromProps(props, state) {
        let newState = {
            tag: props.match.params.tag
        }
        return newState;
    }
    ...
    ...
}
export default WithRouter(ArticleList)

Ici, WithRouter permet au composant ArticleList d'accéder aux informations des balises par le biais de props.

On peut procéder de la même manière pour les composants fonctionnels.

function ArticleList() {
    let { tag } = useParams();
    return (
        <div>
            <h3>ID: {id}</h3>
        </div>
    );
}

Ici, useParams est un React Hooks personnalisé fourni par le composant React Router.