Niveau intermédiaire : routage avec React Router

Le routage est un aspect crucial de la création d'applications Web modernes. React Router est une bibliothèque puissante qui permet aux développeurs de gérer efficacement le routage côté client dans une application React. Ce guide approfondira les bases de la configuration de React Router, en utilisant les composants essentiels et en explorant les techniques de routage avancées telles que les routes imbriquées, le routage dynamique, les paramètres de route et les gardes de route.

Introduction au routeur React

React Router vous permet de gérer la navigation et le rendu de différents composants en fonction de l'URL. Il aide à créer des applications d'une seule page (SPA) avec une expérience de navigation transparente.

Configuration du routeur React

Pour commencer à utiliser React Router, installez-le à l'aide de npm ou de fil.

npm install react-router-dom

ou

yarn add react-router-dom

Composants d'itinéraire, de commutateur, de liaison et de NavLink

React Router fournit plusieurs composants de base pour définir des itinéraires et gérer la navigation.

Composant d'itinéraire

Le composant Route permet de définir un chemin et de l'associer à un composant.

Exemple :

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

Dans cet exemple, le composant Home est rendu lorsque le chemin est /, et le composant About est rendu lorsque le chemin est /about.

Composant de commutation

Le composant Switch garantit que seule la première route correspondante est rendue.

Exemple :

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;

Dans cet exemple, si aucune route ne correspond, le composant NotFound est rendu.

Composant de lien

Le composant Link crée des liens de navigation dans votre application, similaires aux balises d'ancrage (), mais sans rechargement de page.

Exemple :

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

Dans cet exemple, cliquer sur les liens permet d'accéder aux itinéraires respectifs sans recharger la page.

Composant NavLink

Le composant NavLink est similaire au composant Link mais offre des capacités de style supplémentaires basées sur l'itinéraire actif.

Exemple :

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

Dans cet exemple, la prop activeClassName applique la classe active au lien qui correspond à l'itinéraire actuel.

Techniques de routage avancées

Itinéraires imbriqués

Les itinéraires imbriqués vous permettent de créer des itinéraires au sein d'autres itinéraires, permettant une structure hiérarchique de navigation.

Exemple :

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

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dans cet exemple, le composant Topics contient des itinéraires imbriqués, permettant un système de sous-navigation au sein de la section Topics.

Routage dynamique

Le routage dynamique vous permet de créer des itinéraires basés sur des paramètres dynamiques, tels que les ID utilisateur ou les ID produit.

Exemple :

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

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dans cet exemple, le composant User est rendu avec l'ID utilisateur passé comme paramètre de route.

Paramètres d'itinéraire

Les paramètres de route vous permettent de capturer les valeurs de l'URL et de les utiliser dans vos composants.

Exemple :

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

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

Dans cet exemple, le composant Product utilise le paramètre de route productId pour afficher l'ID du produit.

Gardes de route et redirections

Les gardes d'itinéraire et les redirections vous aident à contrôler l'accès à certains itinéraires en fonction de conditions, telles que l'authentification de l'utilisateur.

Protéger les routes

Pour protéger les routes, vous pouvez créer un composant d'ordre supérieur (HOC) qui vérifie une condition (par exemple, l'authentification de l'utilisateur) avant de restituer le composant.

Exemple :

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

const isAuthenticated = false;

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

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

Dans cet exemple, le composant PrivateRoute vérifie si l'utilisateur est authentifié avant de restituer le composant Dashboard. Si l'utilisateur n'est pas authentifié, il est redirigé vers le composant de connexion.

Implémentation de redirections dans React Router

Les redirections peuvent être implémentées à l'aide du composant Redirect pour diriger les utilisateurs vers un itinéraire différent par programmation.

Exemple :

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

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);



export default App;

Dans cet exemple, visiter /old-page redirigera automatiquement l'utilisateur vers /new-page.

Conclusion

Comprendre et implémenter le routage avec React Router est essentiel pour créer des applications React robustes. En maîtrisant les bases de la configuration d'itinéraires, de la gestion de la navigation avec Link et NavLink et en mettant en œuvre des techniques avancées telles que les itinéraires imbriqués, l'itinéraire dynamique, les paramètres d'itinéraire et les gardes d'itinéraire, vous pouvez créer des expériences de navigation transparentes et sécurisées dans vos applications. Ces concepts constitueront la base de votre capacité à créer des applications sophistiquées d'une seule page avec React tout en continuant à développer vos compétences.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!