Niveau junior : Routage avec React Router

Le routage est un élément essentiel de la création d'applications Web modernes. React Router est une bibliothèque puissante qui vous permet de gérer efficacement le routage dans une application React. Ce guide vous aidera à comprendre les bases de React Router, y compris sa configuration, l'utilisation des composants essentiels et l'exploration des 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 permet la navigation entre différents composants dans une application React, vous permettant de créer une application monopage (SPA) avec plusieurs vues.

Configuration du routeur React

Pour démarrer avec React Router, vous devez l'installer dans votre projet. Vous pouvez le faire en utilisant npm ou 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 pour définir des itinéraires et gérer la navigation.

Composant d'itinéraire

Le composant Route permet de définir une route dans votre application. Il spécifie le chemin et le composant qui doivent être rendus lorsque le chemin correspond.

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 qu'une seule route est rendue à la fois. Il affiche la première route qui correspond à l'URL actuelle.

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 à une balise d'ancrage () mais sans recharger la 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, utiles pour créer des mises en page avec sous-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!