Réagir Routeur

Create React App n'inclut pas le routage de page.

React Router est la solution la plus populaire.

Ajouter un routeur React

Pour ajouter React Router dans votre application, exécutez-le dans le terminal à partir du répertoire racine de l'application :

Structure des dossiers

Pour créer une application avec plusieurs itinéraires de page, commençons d'abord par la structure du fichier.

Dans le srcdossier, nous allons créer un dossier nommé pagesavec plusieurs fichiers :

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Chaque fichier contiendra un composant React très basique.

Utilisation de base

Nous allons maintenant utiliser notre routeur dans notre index.jsfichier.

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

Exemple expliqué

Nous enveloppons d'abord notre contenu avec <BrowserRouter>.

Ensuite, nous définissons notre <Routes>. Une application peut avoir plusieurs <Routes>. Notre exemple de base n'en utilise qu'un.

<Route>s peuvent être imbriqués. Le premier <Route>a un chemin d'accès / et rend le Layoutcomposant.

Les s imbriqués <Route>héritent et s'ajoutent à la route parent. Ainsi, le blogschemin est combiné avec le parent et devient /blogs.

La Homeroute de composant n'a pas de chemin mais a un indexattribut. Cela spécifie cette route comme route par défaut pour la route parente, qui est /.

Définir le pathà *agira comme un fourre-tout pour toutes les URL non définies. C'est parfait pour une page d'erreur 404.

Pages / Composants

Le Layoutcomposant a des éléments <Outlet>et <Link>.

Le <Outlet>rend l'itinéraire actuel sélectionné.

<Link> est utilisé pour définir l'URL et garder une trace de l'historique de navigation.

Chaque fois que nous établirons un lien vers un chemin interne, nous utiliserons à la <Link> place de <a href="">.

La "route de mise en page" est un composant partagé qui insère un contenu commun sur toutes les pages, comme un menu de navigation.

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;