15.1 Plusieurs Pages dans une Application React : Guide

Plusieurs Pages Application React sont essentielles pour structurer des applications complexes et offrir une navigation fluide à l’utilisateur. Ce guide vous expliquera comment créer et gérer plusieurs pages dans une application React en utilisant React Router, et vous fournira des conseils pratiques pour rendre votre application plus dynamique et interactive. En savoir plus sur qu’est-ce que React, introduction et avantages.

Introduction au Routage dans une Application React

Le routage en React est un moyen de naviguer entre différentes vues de l’application. React Router est la bibliothèque de choix pour implémenter le routage en React, permettant ainsi de gérer les URLs de manière flexible et efficace. Commençons par installer React Router, puis découvrons comment l’utiliser pour créer une application multi-pages. Vous pouvez également découvrir les différences entre les applications à page unique et multi-pages dans React.

Installer React Router

Pour utiliser React Router, commencez par l’installer dans votre projet. Vous pouvez le faire en utilisant npm ou yarn :

npm install react-router-dom

Créer les Routes de l’Application

Une fois React Router installé, vous pouvez commencer à définir vos routes. Voici comment créer un ensemble basique de routes :

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

const Home = () => <h2>Page d'accueil</h2>;
const About = () => <h2>À propos</h2>;
const Contact = () => <h2>Contact</h2>;

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

export default App;

Créer des Liens de Navigation

Pour permettre aux utilisateurs de naviguer entre les pages, vous pouvez créer des liens en utilisant le composant Link de React Router :

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Accueil</Link></li>
        <li><Link to="/about">À propos</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

Gérer les Pages 404

Il est important de gérer les routes non définies pour offrir une bonne expérience utilisateur. Vous pouvez ajouter une page 404 personnalisée dans votre configuration de routage :

const NotFound = () => <h2>Page non trouvée</h2>;

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

Exemples Avancés de Routage

Pour enrichir votre application, vous pouvez utiliser des fonctionnalités avancées de React Router telles que le routage dynamique, les chemins imbriqués, et la protection des routes. Il est aussi bénéfique de savoir se lancer dans le développement React avec une introduction.

Routage Dynamique

Le routage dynamique est utile lorsque vous souhaitez charger des composants basés sur des paramètres ou des segments de chemin variables :

const UserProfile = ({ match }) => <h2>Profil utilisateur: {match.params.username}</h2>;

function App() {
  return (
    <Router>
      <Switch>
        // More routes...
        <Route path="/user/:username" component={UserProfile} />
      </Switch>
    </Router>
  );
}

Protection des Routes

Pour protéger certaines routes et ne les rendre accessibles qu’à des utilisateurs authentifiés, vous pouvez utiliser une logique de protection de routes :

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

function App() {
  return (
    <Router>
      <Switch>
        // More routes...
        <PrivateRoute path="/profile" component={UserProfile} />
      </Switch>
    </Router>
  );
}

Navigation Conditionnelle

React Router permet également une navigation conditionnelle pour rediriger les utilisateurs en fonction d’événements ou d’actions spécifiques.

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

function SomeComponent() {
  const history = useHistory();

  const handleClick = () => {
    // Some logic...
    history.push('/new-path');
  };

  return (
    <button onClick={handleClick}>Rediriger</button>
  );
}

Vous pouvez approfondir vos connaissances sur les différences entre les composants par classe et fonction en React pour un meilleur développement.

Conclusion

L’utilisation de plusieurs pages dans une application React via React Router enrichit considérablement l’expérience utilisateur. Cela permet une meilleur organisation de l’application et une navigation intuitive. Pour aller plus loin dans la personnalisation et l’optimisation de vos applications React, explorez des ressources comme le site officiel de React, qui offre une documentation exhaustive. Pour apprendre davantage sur les bonnes pratiques de React Router, considérez les cours en ligne disponibles sur Pluralsight. Découvrez également pourquoi utiliser let et const en JavaScript pour améliorer votre utilisation de React.