Création d'applications multipages dans React : un didacticiel de routeur

Créer une application multipage dans React est simple avec l'aide de React Router. React Router est une bibliothèque puissante qui vous permet d'implémenter le routage dans vos applications React. Dans cet article, nous passerons en revue les étapes de configuration d'une application multipage à l'aide de React Router, couvrant les concepts de base et des exemples de code pour vous aider à démarrer.

Qu’est-ce que React Router ?

React Router est une bibliothèque qui permet le routage dynamique dans vos applications React. Il vous aide à gérer la navigation et à restituer différents composants en fonction du chemin de l'URL. Avec React Router, vous pouvez créer une expérience multipage transparente au sein d'une application d'une seule page.

Commencer

1. Installez le routeur React

Tout d’abord, vous devez installer React Router. Ouvrez votre terminal et exécutez la commande suivante :

npm install react-router-dom

2. Configurez la structure de votre projet

Créez un projet React de base si vous ne l'avez pas déjà fait. Votre dossier de projet pourrait ressembler à ceci :

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   ├── index.js
│   └── App.css
└── package.json

3. Créez des composants pour chaque page

Créez les composants pour chaque page de votre application. Pour cet exemple, nous allons créer Home.js, About.js et Contact.js dans le dossier des composants.

Home.js

import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

À propos de.js

import React from 'react';

function About() {
  return <h1>About Page</h1>;
}

export default About;

Contact.js

import React from 'react';

function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

4. Configurer le routage dans App.js

Maintenant, configurez le routage dans votre fichier App.js. Importez les composants nécessaires depuis React-Router-Dom et configurez vos itinéraires.

App.js

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Dans ce code :

• BrowserRouter (alias Router) est utilisé pour gérer le routage.
• La route définit le chemin et le composant à restituer.
• Les routes encapsulent plusieurs composants de route.
• Le lien est utilisé pour créer des liens de navigation.

5. Ajoutez un style de base

Vous pouvez ajouter quelques styles de base à votre App.css pour améliorer l'apparence de la navigation.

App.css

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

6. Exécutez votre application

Enfin, exécutez votre application React avec la commande suivante :

npm start

Ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir votre application multipage avec des liens de navigation fonctionnels.

Conclusion

Avec React Router, créer une application multipage devient un jeu d'enfant. Vous avez appris à configurer le routage de base, à créer des composants de page et à gérer la navigation. La flexibilité et la facilité d'utilisation de React Router en font un outil essentiel pour les développeurs React, vous permettant de créer des applications Web dynamiques et conviviales.

? Vous pouvez m'aider en faisant un don

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!