Ahora que hemos envuelto nuestra aplicación con BrowserRouter para habilitar el enrutamiento, el siguiente paso es especificar las rutas (paths) que incluirá nuestra aplicación. Estas rutas determinan la estructura general de la aplicación y controlan qué contenido se muestra según la URL.

React Router proporciona dos componentes esenciales para definir rutas: Routes y Route. El componente Routes actúa como contenedor para todas las definiciones de rutas, mientras que el componente Route representa una configuración de ruta específica.

Esta es la sintaxis para definir rutas:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

En esta estructura:

• <path_value>: Especifica la configuración de URL para la ruta;
• <component_to_render>: Determina el componente que se renderiza cuando un usuario navega a esa ruta específica.

Ejemplo

Apliquemos este concepto a nuestro proyecto. Abre el archivo App.jsx e importa los componentes Routes y Route de la librería react-router-dom:

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

Dentro de la declaración return del componente App, define las rutas para nuestra aplicación:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Explicación del código:

• Línea 4, 8: <Routes>: Este componente sirve como contenedor para definir rutas en la aplicación, actuando como componente padre para las definiciones individuales de rutas;
• Línea 5: <Route>: Representa una definición de ruta. Especifica que cuando la ruta de la URL coincide con /, se debe renderizar el componente <HomePage />;
• Línea 6: <Route>: Define otra ruta. Cuando la ruta de la URL coincide con /about, se renderizará el componente <AboutPage />;
• Línea 7: <Route>: Define otra ruta. Cuando la ruta de la URL coincide con /contacts, se renderizará el componente <ContactsPage />.