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 (     ); }; 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 (        ); }; export default App;

Composant de lien

Le composant Link crée des liens de navigation, empêchant les rechargements de pages complètes 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 (      ); }; 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 (      ); }; 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 }) => 
Requested Topic ID: {match.params.topicId}
; const Topics = () => { let { path, url } = useRouteMatch(); return ( 
 
Topics
 
 
 Components 
 
 Props v. State 
 
   
Please select a topic.
    
 ); }; const App = () => (  
 
 
 Home 
 
 Topics 
 
   
Home
    
  ); 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 }) => 
User ID: {match.params.userId}
; const App = () => (  
 
 
 User 1 
 
 User 2 
 
    
  ); export default App;

Paramètres d'itinéraire

Les paramètres d'itinéraire 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 }) => 
Product ID: {match.params.productId}
; const App = () => (  
 
 
 Product 101 
 
 Product 202 
 
    
  ); export default App;

Gardes de route et redirections

Protéger les routes

Les gardes-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 }) => (  isAuthenticated ?  :  } /> ); const Dashboard = () => 
Dashboard
; const Login = () => 
Login
; const App = () => (  
   
  ); 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 = () => 
Old Page (will redirect)
; const NewPage = () => 
New Page
; const App = () => (         ); 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!