Niveau senior : Routage avec React Router

En tant que développeur de niveau supérieur, il est crucial d'avoir une compréhension complète du routage dans les applications React. React Router fournit une solution robuste pour gérer la navigation et le rendu des composants en fonction des chemins d'URL. Ce guide couvre la configuration de React Router, les composants essentiels et les techniques 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 est une bibliothèque puissante pour gérer le routage côté client dans les applications React. Il permet un routage dynamique, des itinéraires imbriqués et un rendu conditionnel basé sur le chemin de l'URL.

Configuration du routeur React

Tout d'abord, installez React Router en utilisant npm ou Yarn :

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 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;

Composant de commutation

Le composant Switch garantit qu'un seul itinéraire est rendu à la fois, correspondant au premier itinéraire qui convient.

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;

Composant de lien

Le composant Link crée des liens de navigation, empêchant le rechargement d'une page entière et préservant l'expérience d'application sur une seule 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;

Composant NavLink

Le composant NavLink est similaire à Link mais permet un style basé 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;

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, ce qui est utile pour les mises en page complexes 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;

Routage dynamique

Le routage dynamique permet de créer des itinéraires basés sur des paramètres dynamiques, utiles pour les profils d'utilisateurs ou les détails du 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;

Paramètres d'itinéraire

Les paramètres de route permettent de capturer les valeurs de l'URL à utiliser dans les 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;

Gardes de route et redirections

Protéger les routes

Les gardes de route restreignent l'accès à certains itinéraires en fonction de conditions telles que l'authentification des utilisateurs.

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;

Implémentation de redirections dans React Router

Les redirections peuvent diriger les utilisateurs vers différents itinéraires 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 redirige automatiquement l'utilisateur vers /new-page.

Conclusion

Maîtriser le routage avec React Router est essentiel pour créer des applications React sophistiquées et conviviales. Comprendre comment configurer des itinéraires, utiliser les composants de base et mettre en œuvre des techniques avancées telles que des itinéraires imbriqués, un routage dynamique, des paramètres d'itinéraire et des gardes d'itinéraire vous permettra de créer des systèmes de navigation robustes. En tant que développeur senior, ces compétences vous aideront à concevoir et à mettre en œuvre des architectures de routage évolutives dans vos projets React, garantissant une expérience utilisateur transparente et une base de code maintenable.

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!