Comment utiliser le DOM du routeur React

Introduction

Bienvenue dans notre tutoriel approfondi sur React Router DOM ! Si vous êtes un développeur d'interface utilisateur cherchant à améliorer vos applications React avec des fonctionnalités de routage dynamique, vous êtes au bon endroit. React Router DOM est une bibliothèque puissante qui vous permet de créer des applications d'une seule page avec plusieurs vues, tout en conservant une expérience utilisateur fluide et transparente.

Dans ce guide complet, nous vous expliquerons tout ce que vous devez savoir sur React Router DOM, des concepts de base aux techniques avancées. Que vous soyez nouveau sur React ou un développeur expérimenté cherchant à améliorer vos compétences, ce tutoriel vous fournira les connaissances et les exemples pratiques dont vous avez besoin pour implémenter efficacement le routage dans vos applications React.

Alors, plongeons et explorons ensemble le monde de React Router DOM !

Premiers pas avec React Router DOM

Qu’est-ce que le DOM du routeur React ?

React Router DOM est une bibliothèque de routage populaire pour les applications React. Il vous permet de créer un routage dynamique côté client dans vos applications monopage (SPA). Avec React Router DOM, vous pouvez facilement gérer différentes vues et composants en fonction de l'URL actuelle, offrant ainsi une expérience de navigation transparente à vos utilisateurs.

Installation du DOM du routeur React

Avant de commencer à implémenter le routage dans notre application React, nous devons installer le package DOM React Router. Ouvrez votre terminal et accédez au répertoire de votre projet, puis exécutez la commande suivante :

npm install react-router-dom

Cela installera la dernière version de React Router DOM dans votre projet.

Configuration de base

Pour commencer à utiliser React Router DOM dans votre application, vous devez importer les composants nécessaires et envelopper le composant principal de votre application avec le composant BrowserRouter. Voici un exemple de base de la façon de configurer le DOM de React Router dans votre fichier index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Maintenant que nous avons la configuration de base en place, explorons les composants principaux de React Router DOM et comment les utiliser efficacement.

Composants de base du DOM du routeur React

Itinéraires et itinéraire

Les composants Routes et Route sont les éléments constitutifs du DOM de React Router. Ils vous permettent de définir les différents chemins et composants qui doivent être rendus pour chaque itinéraire dans votre application.

Voici un exemple d'utilisation de ces composants :

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

Dans cet exemple, nous avons défini trois itinéraires : la page d'accueil ("/"), une page à propos ("/about") et une page de contact ("/contact"). Chaque itinéraire est associé à un composant spécifique qui sera rendu lors de l'accès à l'URL correspondante.

Composant de lien

Le composant Link permet de créer des liens de navigation dans votre application. Il s'agit d'un élément essentiel du DOM de React Router car il permet aux utilisateurs de se déplacer entre différentes vues sans déclencher un rechargement complet de la page.

Voici comment utiliser le composant Link :

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

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

export default Navigation;

Composant NavLink

Le composant NavLink est similaire à Link, mais il fournit des fonctionnalités supplémentaires pour styliser les liens actifs. Ceci est particulièrement utile pour créer des menus de navigation dans lesquels vous souhaitez mettre en évidence la page active actuelle.

Voici un exemple d'utilisation de NavLink :

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

Dans cet exemple, nous utilisons la prop isActive pour appliquer une couleur rouge au lien actif.

Techniques de routage avancées

Maintenant que nous avons couvert les bases, explorons quelques techniques de routage plus avancées que vous pouvez implémenter à l'aide de React Router DOM.

Itinéraires imbriqués

Les routes imbriquées vous permettent de créer des structures de routage plus complexes au sein de votre application. Ceci est particulièrement utile pour créer des mises en page avec des composants partagés ou pour organiser des itinéraires associés.

Voici un exemple de la façon d'implémenter des routes imbriquées :

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import ServiceDetails from './components/ServiceDetails';

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="services" element={<Services />} />
        <Route path="services/:id" element={<ServiceDetails />} />
      </Route>
    </Routes>
  );
}

export default App;

Dans cet exemple, nous avons créé un composant Layout qui comprend un en-tête et un pied de page. Le composant Outlet est utilisé pour restituer les itinéraires enfants dans la mise en page.

Itinéraires dynamiques et paramètres d'URL

Les itinéraires dynamiques vous permettent de créer des chemins flexibles pouvant gérer des segments variables. Ceci est utile pour les scénarios dans lesquels vous devez afficher des informations détaillées sur un élément spécifique, comme une page de produit ou un profil utilisateur.

Voici un exemple d'utilisation des routes dynamiques et d'accès aux paramètres d'URL :

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

function ProductDetails() {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Details</h1>
      <p>You are viewing product with ID: {productId}</p>
    </div>
  );
}

export default ProductDetails;

Pour utiliser ce composant, vous définiriez un itinéraire comme celui-ci :

<Route path="/products/:productId" element={<ProductDetails />} />

Navigation programmatique

Parfois, vous devez naviguer par programmation en fonction de certaines conditions ou actions de l'utilisateur. React Router DOM fournit le hook useNavigate à cet effet.

Here's an example of how to use useNavigate:

import React from 'react';
import { useNavigate } from 'react-router-dom';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    // Perform login logic here
    // If login is successful, navigate to the dashboard
    navigate('/dashboard');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Handling Route Parameters and Query Strings

React Router DOM provides powerful tools for working with route parameters and query strings, allowing you to create dynamic and flexible routing solutions.

Route Parameters

We've already seen how to use route parameters with the useParams hook. Let's explore this further with a more complex example:

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

function BlogPost() {
  const { category, postId } = useParams();

  return (
    <div>
      <h1>Blog Post</h1>
      <p>Category: {category}</p>
      <p>Post ID: {postId}</p>
    </div>
  );
}

export default BlogPost;

To use this component, you would define a route like this:

<Route path="/blog/:category/:postId" element={<BlogPost />} />

This allows you to create URLs like /blog/technology/123 or /blog/travel/456, with the category and post ID being dynamically extracted from the URL.

Query Strings

Query strings are useful for passing optional parameters to your routes. React Router DOM provides the useSearchParams hook to work with query strings.

Here's an example of how to use useSearchParams:

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');
  const sortBy = searchParams.get('sortBy');

  return (
    <div>
      <h1>Product List</h1>
      <p>Category: {category || 'All'}</p>
      <p>Sort By: {sortBy || 'Default'}</p>
      <button onClick={() => setSearchParams({ category: 'electronics', sortBy: 'price' })}>
        Filter Electronics, Sort by Price
      </button>
    </div>
  );
}

export default ProductList;

In this example, we're reading the category and sortBy parameters from the query string. We're also demonstrating how to update the query string using the setSearchParams function.

Protecting Routes and Handling Authentication

One common requirement in many applications is to protect certain routes based on user authentication status. React Router DOM can be used in conjunction with your authentication logic to create protected routes.

Here's an example of how you might implement protected routes:

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

function ProtectedRoute({ element, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" replace />}
    />
  );
}

function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
      <ProtectedRoute
        path="/dashboard"
        element={<Dashboard />}
        isAuthenticated={isAuthenticated}
      />
    </Routes>
  );
}

export default App;

In this example, we've created a ProtectedRoute component that checks if the user is authenticated. If they are, it renders the specified element; if not, it redirects them to the login page.

Handling 404 Pages and Redirects

React Router DOM makes it easy to handle 404 (Not Found) pages and implement redirects when necessary.

404 Pages

To create a 404 page, you can use the * path at the end of your route definitions:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

In this example, the NotFound component will be rendered for any route that doesn't match the defined paths.

Redirects

Sometimes you may need to redirect users from one route to another. React Router DOM provides the Navigate component for this purpose:

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './components/Home';
import OldPage from './components/OldPage';
import NewPage from './components/NewPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/old-page" element={<Navigate to="/new-page" replace />} />
      <Route path="/new-page" element={<NewPage />} />
    </Routes>
  );
}

export default App;

In this example, any user trying to access /old-page will be automatically redirected to /new-page.

Optimizing Performance with Code Splitting

As your application grows, you may want to implement code splitting to improve performance. React Router DOM works well with React's lazy loading feature, allowing you to load route components only when they're needed.

Here's an example of how to implement code splitting with React Router DOM:

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

export default App;

In this example, we're using React's `lazy` function to dynamically import our components. The `Suspense` component is used to show a loading indicator while the component is being loaded.

Conclusion

Congratulations! You've now completed a comprehensive tutorial on React Router DOM. We've covered everything from basic setup to advanced techniques like nested routes, dynamic routing, authentication, and code splitting. With this knowledge, you're well-equipped to implement robust routing solutions in your React applications.

Remember, the key to mastering React Router DOM is practice. Try implementing these concepts in your own projects, and don't be afraid to experiment with different routing structures and techniques. As you become more comfortable with React Router DOM, you'll find that it opens up new possibilities for creating dynamic and user-friendly web applications.

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!