React Router : navigation SPA

Pourquoi React Router : navigation SPA ?

React Router est un outil essentiel pour le développement de Single Page Applications (SPA) avec React. En effet, dans une application SPA, il n'y a qu'une seule page HTML qui s'affiche à l'utilisateur et toutes les interactions sont gérées côté client grâce au JavaScript. Cependant, la navigation entre différentes vues de l'application nécessite une gestion particulière pour ne pas recharger complètement la page, ce qui pourrait entraîner des retards et une mauvaise expérience utilisateur.

Un cas d'usage concret est un site Web e-commerce comme Amazon ou eBay. Ces sites présentent souvent des pages produits détaillés, des paniers d'achat et des pages de paiement. Toutes ces vues sont généralement incluses dans la même page HTML initiale, mais React Router permet de naviguer entre elles sans recharger la page, ce qui améliore l'expérience utilisateur.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissance de base de React
• Un environnement de développement (IDE) comme Visual Studio Code
• Node.js et npm installés sur votre machine (version recommandée : Node.js 14.x ou supérieure)

Concepts fondamentaux

BrowserRouter, Routes et Route

BrowserRouter, Routes, et Route sont les composants principaux de React Router qui permettent la gestion de la navigation.

• BrowserRouter : Le composant BrowserRouter est utilisé pour encapsuler toute votre application React. Il fournit une interface entre React et le navigateur en utilisant l'API de l'historique HTML5.
• Routes : Le composant Routes contient un ensemble de Route. Un seul enfant Route est rendu à la fois. Si plusieurs routes correspondraient, seule la première correspondante sera rendue.
• Route : Le composant Route définit une route avec une URL et un composant React qui doit être affiché.

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Navigate et Link

Navigate et Link sont des composants utilisés pour naviguer entre les routes.

• Link : Le composant Link est similaire au balisage <a>, mais il ne cause pas de rechargement de la page. En interne, il utilise l'historique du navigateur.
• Navigate : Le composant Navigate est utilisé pour naviguer programmiquement entre les routes.

import { Link, Navigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">Go to About</Link>
      <button onClick={() => navigate('/contact')}>Go to Contact</button>
    </div>
  );
}

useParams et useSearchParams

useParams et useSearchParams sont des hooks qui permettent d'extraire les paramètres de route et les paramètres de recherche.

• useParams : Ce hook renvoie un objet contenant tous les paramètres de la route actuelle.
• useSearchParams : Ce hook renvoie un tableau avec le premier élément étant l'objet des paramètres de recherche et le deuxième étant une fonction pour mettre à jour les paramètres de recherche.

import { useParams, useSearchParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <div>
      <h1>User Profile</h1>
      <p>ID: {id}</p>
      <input
        type="text"
        value={searchParams.get('name') || ''}
        onChange={(e) => {
          const newName = e.target.value;
          setSearchParams({ name: newName });
        }}
      />
    </div>
  );
}

Mise en pratique : projet fil rouge

Pour mettre en pratique ce que nous venons de voir, allons-y avec un simple gestionnaire de tâches. Nous créerons une application qui permet d'afficher une liste de tâches et de naviguer entre différentes vues.

Étape 1 : Initialiser le projet

npx create-react-app task-manager
cd task-manager
npm start

Étape 2 : Installer React Router

npm install react-router-dom@6

Étape 3 : Configurer React Router

Créez un fichier App.js avec le code suivant :

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Tasks from './Tasks';
import TaskDetails from './TaskDetails';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tasks" element={<Tasks />} />
        <Route path="/tasks/:id" element={<TaskDetails />} />
      </Routes>
    </Router>
  );
}

export default App;

Étape 4 : Créer les composants

Créez un fichier Home.js :

import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Task Manager</h1>
      <Link to="/tasks">Go to Tasks</Link>
    </div>
  );
}

export default Home;

Créez un fichier Tasks.js :

import { Link } from 'react-router-dom';

function Tasks() {
  const tasks = [
    { id: 1, title: 'Task 1', description: 'Description of Task 1' },
    { id: 2, title: 'Task 2', description: 'Description of Task 2' }
  ];

  return (
    <div>
      <h1>Tasks</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Link to={`/tasks/${task.id}`}>{task.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Tasks;

Créez un fichier TaskDetails.js :

import { useParams } from 'react-router-dom';

function TaskDetails() {
  const { id } = useParams();

  return (
    <div>
      <h1>Task Details</h1>
      <p>ID: {id}</p>
    </div>
  );
}

export default TaskDetails;

Étape 5 : Tester l'application

Vous devriez maintenant avoir une application qui permet de naviguer entre différentes vues en utilisant React Router.

Erreurs frequentes et debugging

1. Erreur 404 : Vous avez configuré les routes mais la page ne s'affiche pas correctement.

<Route path="/tasks" component={Tasks} />

## 
<Route path="/tasks" element={<Tasks />} />

2. Navigateur n'actualise pas la page : Vous utilisez Link mais la page est rechargée.

<a href="/about">Go to About</a>

## 
<Link to="/about">Go to About</Link>

3. Paramètres de route manquants : Vous essayez d'accéder à une page avec un paramètre qui n'est pas défini.

<Route path="/tasks/:id" component={TaskDetails} />

## 
<Route path="/tasks/:id" element={<TaskDetails />} />

Pour aller plus loin

1. Authentification et redirection : Utilisez React Router pour rediriger les utilisateurs non authentifiés vers la page de connexion.

2. Gestion des paramètres de recherche : Utilisez useSearchParams pour permettre aux utilisateurs de filtrer les tâches en fonction d'un terme de recherche.

3. Naviguer programmiquement avec Navigate : Utilisez le hook useNavigate pour naviguer entre les pages sans utiliser les composants Link.

Défi pratique : Créez une application simple de gestion de contacts qui permet d'afficher une liste de contacts, de détails sur un contact spécifique et de navigation entre ces vues.