s13 cours

13.Gestion du routage 13.1. Qu'est-ce que le routage ? Le routage est la capacité d'afficher différentes pages à l'utilisateur. Cela signifie qu'il donne la possibilité de naviguer entre les différentes parties d'une application en entrant une URL ou en cliquant sur un élément.

L'idée de Router (Routeur) est tellement utile car vous travaillez avec React, une bibliothèque Javascript pour programmer des applications d'une seule page (Single Page Application). Afin de développer une application React il vous faut écrire plusieurs Component mais il a besoin d'un seul fichier afin de servir des utilisateurs, c'est index.html.

Par défaut, React vient sans routage. Et pour l'activer, nous devons ajouter une bibliothèque nommée react-router. Pour l'installer, vous devrez exécuter la commande suivante dans votre terminal :

npm install react-router-dom Le React Router vous permet de définir des URL dynamiques et de sélectionner un Component approprié pour render (afficher) sur le navigateur d'utilisateur en correspodance à chaque URL.

13.2. <BrowserRouter> vs <HashRouter> Le React Router vous fournit deux composants tels que <BrowserRouter> & <HashRouter>. Ces deux composants sont différents dans le type deURL qu'ils créent et synchronisent avec.

<BrowserRouter> est utilisé plus couramment, il utilise le History API incluse dans HTML5 pour surveiller l’historique de votre routeur tandis que <HashRouter> utilise le hash de l’URL (window.location.hash) pour tout mémoriser. Si vous avez l'intention de soutenir des anciens navigateurs, vous devez être scellé contre le <HashRouter> ou créer une application React à l'aide du routeur côté client. <HashRouter> est un choix raisonnable.

Le composant <Route> définit une relation (mapping) entre une URL et un Component. Cela signifie que lorsque l'utilisateur visite une URL sur le navigateur, un Component correspondant doit être rendu sur l'interface.

<BrowserRouter> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </BrowserRouter>

L'attribut exact est utilisé dans le <Route> afin de dire que ce <Route> ne fonctionnne que si la URL sur le navigateur correspond absolument à la valeur de son attribut path.