---
title: Mise en place d'un router
tags: frontend, router, framework
author: Julien Noyer
---
# Mise en place d'un router
*The Progressive JavaScript Framework*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only
---
## Introduction
Une application FRONTEND est une suite de fonctionnalités qui sont rendu accessibles via des URLs, appelées "routes", qui sont organisées au niveau le plus haut de l'application. Les routes sont alors définies dans un "router" qui prend un forme différentes selon le framework utilisé.
<br>
<br>
# React.js : react-router-dom
La mise en place du router avec React se fait grâce au module `react-router-dom`. il faut donc dans un premier temps l'installer avec la commande suivante :
```
npm i react-router-dom
```
<br>
Une fois le module installé, il faut créer un dossier nommé `views` à la racine du dossier `src` pour y créer les fichier nécessaire aux routes de l'application. Ces fichiers ont la structure suivante :
```jsx=
/*
[CMP] Main import
Define main imports to create the component
*/
// React modules
import React, { Component } from 'react';
//
/*
[CMP] Definition
Set component class
*/
class SampleView extends Component {
render() {
return (
<div className="sample-view-component">
<p>sample-view-component</p>
</div>
)
}
}
//
/*
[CMP] Export
Export component class
*/
export default SampleView;
//
```
<br>
Les composants des routes doivent s'afficher au niveau le plus haut de l'application, à savoir dans le fichier `App.js`. L'objectif de ce fichier est de présenter une structure HTML globale pour l'application.
Il faut dans un prmier temps, importer le module `react-router-dom` qui premet de configurer le router :
```jsx=
import { BrowserRouter as Router, Switch, Route, Link, useParams } from "react-router-dom";
```
> En rêgle générale les imports se font au début du fichier.
<br>
Le principe de React est ensuite d'utiliser la directive `<Router>` qui agit comme un tableau. Ce "*tableau*" permet de définir les routes de l'application avec cette fois-ci la directive `<Route>`. Quelque soit le framework, une route est toujour défini par un path - c'est à dire une URL - dans lequel est injecté un composant "parent".
De ce fait, la deuxième étape pour intégrer le router est d'importer les différents composant des routes de la manière suivante :
```jsx=
import SampleView from './views/SampleView';
```
<br>
Les routes sont à configurer dans le template du composant car une directive est une balise HTML spécifique dans laquelle des fonctionnalités sont injectées par React ou l'un de ses modules.
```jsx=
...
<Router>
<Route path="/" element={<SampleView />} />
</Router>
...
```
> L'URL est définie avec la propriété `path` et le composant à afficher par la propriété `element`
<br>
Dernière étape de l'intégration du router, nous devons faire en sorte de donner la capacité à notre application de manipuler les URLs dans le navigateur, pour afficher les composants définis dans le fichier `App.js`.
Nous devons donc importer dans le fichier principale de l'application - à savoir `index.js` - le module `react-router-dom` de la manière suivante :
```jsx=
import { BrowserRouter } from "react-router-dom";
```
<br>
Puis, comme pour le fichier `App.js` il faut utiliser un dérictive particulière qui englober la balise `<App />` afin de rendre le router actif de la manière suivante :
```jsx=
...
<BrowserRouter>
<App />
</BrowserRouter>
...
```
<br>
Une fois les routes configurées dans le fichier `App.js`, pour y accéder il ne faut pas utiliser des balise `<a...>` classique mais la directive spécifique au module `react-router-dom` de la manière suivantes :
```jsx=
<Link to={"/"}>Home</Link>
```
> La propriété `to` permet d'identifier la path voulu
<br>
<br>
# Vue.js : vue-router
La mise en place du router sur Vue.js se fait grâce au module `vue-router`, il faut donc dans un premier temps l'installer avec la commande suivante :
```
npm i vue-router
```
<br>
Peu importe le framework, les composants des routes doivent être à l'intérieur d'un dossier nommé `views`. Il ne sagit pas ici d'une obligation mais d'une recommandation, la création d'une application prévoit une grande quantité de composants, il est essentiel de bien organiser son dossier de travail.
Les composants des routes ont la structre de base suivante :
```jsx=
<template>
<div
class="sample-view-component"
>
<p>sample-view-component</p>
</div>
</template>
<script>
/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
/* eslint-disable no-mixed-spaces-and-tabs */
/*
[VUE] Component
Define properties and methods => https://bit.ly/3GdqmXg
*/
export default {
// [VUE] Component name
name: 'SampleView',
/*
[VUE] Components => https://bit.ly/3GdqmXg
Used to inject children components
*/
components: {},
//
/*
[VUE] Computed => https://vuejs.org/guide/essentials/computed.html
Used to define simple in-template expression,
the expression below bind values from Store getters
*/
computed: {},
//
/*
[VUE] Data => https://bit.ly/3GdqmXg
Used to inject data in the Vue.js component
*/
data(){
return {}
},
//
/*
[VUE] Methods => https://bit.ly/3GdqmXg
Used to add methods in Vue.js component
*/
methods: {},
//
}
//
</script>
<style scoped>
</style>
```
> Les commantaire en haut du script permettent de masquer des message d'alerte ESlint.
<br>
Une fois les composants des routes créés, il faut les intégrer dans le fichier de configuration du router. En Vue.js il faut créer un dossier `router` à la racine du dossier `src` pour créer un fichier `index.js` qui contiendra la configuration du router.
Il faut dans un premier temps importer le composant `vue-router` de la façon suivante :
```jsx=
import { createWebHistory, createRouter } from "vue-router";
```
<br>
Les routes en Vue.js sont configurées dans un tableau qui contient un objet par route. Ce tableau est ensuite utilisé pour configurer le router et ensuite exporté afin de l'intégrer dans l'application. La structure de ce tableau est la suivante :
```jsx=
const routerPath = [
{
path: '/',
component: () => import('../views/SampleView.vue'),
}
]
```
> L'URL est définie avec la propriété `path` et le composant à afficher par la propriété `component`.
<br>
C Nous allons à présent utliliser ce tableau pour créer le router avec la méthode `createRouter` qui permet d'identifier les routes et les options du router :
```jsx=
const AppRouter = createRouter({
history: createWebHistory(),
routes: routerPath,
});
```
> L'option `history` permet d'utiliser la mémoire cache de la navigation
<br>
De la m^mee manière que pour React, l'affiche des composants des routes se fait en rêgle générale dans fichier d'entrée de l'application, à savoir le fichier `App.vue`. Ce fichier correspond au composant de plus haut niveaude l'application, sont rôle est de contenir la structure principale du DOM de l'application.
EN Vue.js l'affichage des composant des routes se fait grâve à la directive `<router-view>` associée à la directive `<component>` afin d'analyser l'URL et d'y injecter le bon coposant :
```jsx=
<router-view
v-slot="{ Component }"
:key="$route.name"
>
<component
:is="Component"
@toggleFlashnote="toggleFlashnote"
/>
</router-view>
```
> Les directives étant des balise HTML, il faut les utiliser dans le template du composant.
<br>
Dernière étape pour rendre effective la configuration de notre router dans l'application, nous devons importer le fichier `index.js` du dossier `router` pour l'intégrer dans le fichier `main.js` de la manière suivante :
```jsx=
/*
[VUE] Main imports
Define main imports to create the application
*/
// Vue imports
import { createApp } from 'vue'
// App imports
import ClientAppEntrypoint from './App.vue';
import AppRouter from "./router"; // Path binding => https://router.vuejs.org
//
/*
[APP] Start Vue.js app
Init new Vue.js applilcation
*/
createApp(ClientAppEntrypoint)
.use( AppRouter )
.mount( '#app' )
//
```
<br>
Une fois les routes configurées dans le fichier `main.js`, pour y accéder il ne faut pas utiliser des balise `<a...>` classique mais la directive spécifique au module `vue-router` de la manière suivantes :
```jsx=
<router-link :to="'/'">Home</router-link>
```
> La propriété `to` permet d'identifier la path voulu
<br>
<br>
# Angular: RouterModule
La gestion des routes avec Angular est proche de celle mis en place avec Vue.js, le principe est de créer un tableau d'objet contenant la définition des routes et identifians les composants à charger selon l'URL demandée par le client.
Pour commencer la mise en place du router il est recommander de crer les composants nécessaires aux routes pour qu'ils soient référencés dans le fichier `app.module.ts`. Pour ce faire nous utilisons Angular CLI avec la commande suivante :
```
ng g c views/homeViews
```
<br>
Cette commande nous permet de créer un fichier contenant un code correspondant au code suivant :
```typescript=
/*
Imports
*/
// Angular components
import { Component, OnInit } from '@angular/core';
//
/*
Definition and export
*/
@Component({
selector: 'app-home-view',
template: `
<p>HomeViewComponent</p>
`,
})
export class HomeViewComponent implements OnInit {
/*
[HOOK] OnInit
Called once when the component is initialized (eq: Vue mounted() / React componentDidMount())
*/
ngOnInit(): void {}
//
}
//
```
<br>
Une fois les différents composants des routes créer, nous pouvons organiser notre router en créant un fichier nommé `app.router.ts` à la racine du dossier `app`.
Ce fichier vos nous permettre de définir toutes nous routes et les composants qui y sont associés. Le contenu du fichier `app.router.ts` est le suivant :
```typescript=
/*
Imports
*/
// Angular components
import { Routes } from '@angular/router';
// Inner components
import { HomeViewComponent } from "./views/home-view/home-view.component";
//
/*
Export
*/
export const AppRouterModule: Routes = [
{
path: '',
component: HomeViewComponent,
},
];
//
```
> Pour définir un paramêtre il suffi de le préfixer avec `:`
<br>
Nous importons dans un promier temps l'interface `Routes` qui nous permet de configurer la constante `AppRouterModule`, puis nous importons chacun des composants dont nous avons besoin pour nos routes que nous configurons de la manière suiante :
- `path` : le "endpoint" (fin de l'URL) de la route
- `component` : le composant à utiliser pour la route
> NB: le slash initial de l'URL n'est pas à ajouter dans le "path" (cf. `<base>` dans le fichier `index.html`)
<br>
Nous routes ainsi configurées peuvent ensuite être injectées dans notre application au niveau du fichier principal de notre application, à savoir le fichier `app.module.ts`. Nous devons dans un premier temps importer le module `RouterModule` pour notre module `AppRouterModule` dans notre fichier de la manière suivante :
```typescript=
// Add router
import { RouterModule } from "@angular/router";
import { AppRouterModule } from "./app.router";
```
<br>
Pui, pour configurer notre router il faut l'imaginer comme un middleware globale à notre application, c'est pourquoi nous ajoutons dans le tableau `imports` le code suivant qui permet d'injecter le router dans notre application :
```typescript=
// Inject router in the App
RouterModule.forRoot( AppRouterModule, { onSameUrlNavigation: 'reload' } ),
```
<br>
La méthode `forRoot` du module `RouterModule` permet d'injecter le router à la racine de notre application, cette méthode induit que tous les composants de toutes les routes sont chargés dès le lancement du fichier `app.component` dans le navigateur. Dans la grande majorité des cas il est préférable de mettre en place le principe de `Lazy Loading` que vous pouvez aborder sur le lien suivant : https://angular.io/guide/lazy-loading-ngmodules
> Le principe de `Lazy Loading` est celui qui est utilisé dans le router de Vue.js.
<br>
Comme pour les autres frameworks, nous devons à présent définir le composant qui va accueilir notre router et y injecter les composants correspondant aux routes. Nous allons observer la même logique en considérant notre fichier `app.component.ts` comme celui quinous permet de définir les balise HTML présentes sur toutes les vues de l'application. Nous ouvrons donc ce fishier pour le faire correspondre au code suivant :
```typescript=
@Component({
selector: 'app-root',
template: `
<main>
<!-- Use the router-outlet directive to display route components -->
<router-outlet></router-outlet>
</main>
`,
})
/*
Definition and export
*/
export class AppComponent implements OnInit {
/*
[CMP] Injection
Inject value inside the component
*/
constructor(){}
//
/*
[HOOK] OnInit => https://angular.io/guide/lifecycle-hooks
Called once, after the component in mounted/changed
*/
ngOnInit(): void {}
//
}
//
```
<br>
Comme nous pouvons le constater dans le code ci-dessus, l'affichage des routes avec Angular se fait grâce à la directive `<router-outlet>` dans laquelle ce charge les différents composants des routes.
x
Sign in with Wallet
Connect another wallet