Route

Une route, dans le contexte d’un site web ou d’une application web, peut être analogiquement comparée à une adresse dans une ville.

C’est comme une adresse qui vous indique où trouver une page ou une fonctionnalité spécifique au sein de l’application ou du site web.

En somme, une route offre une navigation structurée et claire, permettant aux utilisateurs de se déplacer efficacement dans l’environnement numérique, tout comme une adresse les oriente dans une ville en identifiant un lieu précis.

Lorsque vous tapez une adresse web dans la barre d’adresse de votre navigateur, vous suivez en réalité une route. Cette route vous mène à une page web particulière sur le site :

• chemin/accueil
• chemin/contact

Comment fonctionne le routage ?

Techniquement une URL est associée à une fonction ou une classe qui sera exécutée lorsque l’utilisateur accèdera à cette URL.

Ainsi, les routes permettent de déterminer ce qui doit être exécuté lorsque l’utilisateur accède à cette URL.

Cela peut servir par exemple

• Pour afficher une page spécifique, telle que la page d’accueil, une page de produit ou une page de contact.
• Pour exécuter une action, telle que l’ajout d’un produit au panier ou la connexion d’un utilisateur.
• Pour filtrer les résultats d’une requête, telle que l’affichage des produits d’une catégorie donnée ou des articles d’un auteur donné.

Exemple dans React

La gestion des routes dans React est couramment effectuée en utilisant la bibliothèque « React Router ».

Installation de React Router qui permet de créer un système de route

yarn add react-router-dom

ou bien

npm -i react-router-dom

Configuration de React Router

A la racine dans App.jsx

// Importation des librairies

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; //React Router > v6
import './App.css'

function App() {

  return (
    <>
      <Router>
        <Routes>
        </Routes>
      </Router>
    </>
  )
}

export default App

Créer les composants

Ajouter un fichier Home.jsx dans src/components/ puis Contact.jsx

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1 className="text-center">Hello</h1>
    </div>
  )
}

Importer le composant enfant dans App.jsx

// Importation des librairies
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

//Importation des composants
import Home from './components/Home'
import Contact from './components/Contact'

// Importation des styles
import './App.css'

function App() {

  return (
    <>
    <Router>
      <Routes>
        
      </Routes>
    </Router>

    </>
  )
}

export default App

Affichage des routes

Dans votre composant App (ou tout autre composant), vous pouvez utiliser le composant Route pour afficher le contenu de la route

// Importation des librairies
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'

// Importation des composants
import Home from './components/Home'
import Contact from './components/Contact'

import './App.css'

function App() {

  return (
    <>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>

    </>
  )
}

export default App

Exemple dans Symfony

Dans Symfony, les routes sont définies dans le fichier config/routes.yaml. Chaque route est définie par une entrée YAML qui contient les éléments suivants :

• path: L’URL de la route.
• controller: Le nom du contrôleur qui sera exécuté lorsque l’utilisateur accède à cette URL.
• action: La méthode du contrôleur qui sera appelée.

# config/routes.yaml

home:
  path: /
  controller: App\Controller\HomeController
  action: index

Dans Vue.js, les routes sont gérées à l’aide d’une bibliothèque appelée « Vue Router ». Cela permet d’ajouter la gestion des routes à votre application de manière modulaire, en séparant la configuration des routes dans un fichier distinct.