Maison >interface Web >js tutoriel >Maîtriser le routage React : un guide complet pour naviguer dans votre application
React Router est une bibliothèque permettant de gérer le routage dans les applications React. Il permet à votre application de naviguer entre différents composants et vues sans recharger une page complète, ce qui rend l'expérience utilisateur transparente.
Commencez par installer React-Router-dom :
npm install react-router-dom
Configurer le routage de base à l'aide de BrowserRouter, Routes et Route :
import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; const Home = () => <h2>Home</h2>; const About = () => <h2>About</h2>; const App = () => { return ( <Router> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); }; export default App;
Pour les applications plus complexes, vous pouvez imbriquer des itinéraires. Voici comment configurer des routes imbriquées dans un composant parent :
import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; const Dashboard = () => <h2>Dashboard Home</h2>; const Profile = () => <h2>Your Profile</h2>; const DashboardLayout = () => { return ( <div> <nav> <Link to="/dashboard">Home</Link> <Link to="/dashboard/profile">Profile</Link> </nav> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="profile" element={<Profile />} /> </Routes> </div> ); }; const App = () => { return ( <Router> <Routes> <Route path="/dashboard/*" element={<DashboardLayout />} /> </Routes> </Router> ); }; export default App;
Le routage dynamique vous permet de transmettre des paramètres dans l'URL. Voici comment définir et accéder à un itinéraire dynamique :
import { useParams } from 'react-router-dom'; const User = () => { const { id } = useParams(); return <h2>User ID: {id}</h2>; }; const App = () => { return ( <Router> <nav> <Link to="/user/1">User 1</Link> <Link to="/user/2">User 2</Link> </nav> <Routes> <Route path="/user/:id" element={<User />} /> </Routes> </Router> ); }; export default App;
Pour implémenter des routes protégées, vous pouvez créer un composant PrivateRoute personnalisé :
import { Navigate, Outlet } from 'react-router-dom'; const useAuth = () => { const user = { loggedIn: true }; // Replace with actual auth logic return user && user.loggedIn; }; const PrivateRoute = () => { const isAuth = useAuth(); return isAuth ? <Outlet /> : <Navigate to="/login" />; }; const App = () => { return ( <Router> <Routes> <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={<PrivateRoute />}> <Route path="" element={<Dashboard />} /> </Route> </Routes> </Router> ); }; export default App;
Parfois, vous souhaiterez peut-être naviguer par programmation, comme après la soumission d'un formulaire. Utilisez le hook useNavigate dans React Router v6 :
import { useNavigate } from 'react-router-dom'; const Login = () => { const navigate = useNavigate(); const handleLogin = () => { // Login logic here... navigate('/dashboard'); }; return ( <div> <h2>Login</h2> <button onClick={handleLogin}>Login</button> </div> ); }; export default Login;
Gérez les erreurs 404 (Not Found) en créant une route fourre-tout :
const NotFound = () => <h2>404 - Page Not Found</h2>; const App = () => { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); }; export default App;
Pour les applications volumineuses, les itinéraires de chargement paresseux peuvent améliorer les performances. Voici comment implémenter le chargement paresseux avec React.lazy() et Suspense :
import React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; const Home = lazy(() => import('./Home')); const About = lazy(() => import('./About')); const App = () => { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Suspense> </Router> ); }; export default App;
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!