Maîtriser le routage React : un guide complet pour naviguer dans votre application-js tutoriel-php.cn

Maîtriser le routage React : un guide complet pour naviguer dans votre application

Susan Sarandon

Libérer： 2024-10-04 06:20:29

original

404 Les gens l'ont consulté

Mastering React Routing: A Complete Guide to Navigating Your Application

1. Introduction au routeur React

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.

2. Configuration de base

Commencez par installer React-Router-dom :

npm install react-router-dom

Copier après la connexion

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;

Copier après la connexion

3. Routage imbriqué

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;

Copier après la connexion

4. Routage dynamique

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;

Copier après la connexion

5. Itinéraires protégés

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;

Copier après la connexion

6. Navigation programmatique

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;

Copier après la connexion

7. 404 Pages

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;

Copier après la connexion

8. Considérations relatives aux performances

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;

Copier après la connexion

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!