React-router-dom es una de las más populares liberías de enrutamiento más populares para ReactJS, nos permite utilizar múltiples páginas. Esta es una herramienta conveniente para cuando hay que gestionar proyectos de gran envergadura. La realidad es que react-router-dom es un monorepo que alberga las siguiente librerías :

• react-router
• react-router-dom
• react-router-native

Paso previos

Lo primero que se necesita es tener un proyecto de react, puedes hacerlo directamente con create-react-app o con vite

    # create react app
    npx create-react-app router-tutorial
    
    # vite
    npm init vite@latest router-tutorial --template react

Con este paso hecho, vamos Para instalar la librería vamos a la terminal encima de nuestro proyecto react, y tipeamos lo siguiente:

npm i react-router-dom

Una vez instalado, en el documento de [project-folder]\src\app.jsx importamos las siguientes dependencias:

import { BrowserRouter, Route, Routes } from "react-router-dom";

Para lo siguiente vamos a generar algunos componentes que nos sirvan de páginas para la aplicación, siguiendo la siguiente estructura de carpetas

• \src
  • App.jsx
  • \layout
    • Main.jsx
  • \pages
    • CreateClient.jsx
    • ListClient.jsx

En los documentos alojados en la carpeta \pages\ vamos a agregar lo siguiente:

import React from 'react';

const CreateClient= () => {
    return (
        <div>
            Create CLient
        </div>
    );
};

export default CreateClient;

import React from 'react';

const ListClient= () => {
    return (
        <div>
            Index CLient
        </div>
    );
};

export default ListClient;

Volvemos al documento src\App.jsx y lo primero que vamos a instanciar es BrowserRouter, para generar un nuevo routing, cargando diferentes endpoints y cargando los componentes que vamos a definir.

Una vez colocada la etiqueta de apertura y cierre de BrowserRouter, dentro vamos a colocar las etiquetas de Routes, que a su vez dentro va a contener las etiquetas Route. Así que nuestro código debería verse así:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./layout/Main";
import CreateClient from "./pages/CreateClient";
import EditClient from "./pages/EditClient";
import ListClientfrom "./pages/ListClient";

function App() {
  return (
    <BrowserRouter>
        <Route>
          <Route/>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

A partir de aquí vamos a aprovechar una de las virtudes de la nueva versión de react-route-dom, que se denomina nested route, que no sería más que rutas embebidas, o anidadas, con esto podemos hacer una ruta principal, y que de esta vayan generando nuevas sub-rutas.