React Router es una librería de enrutamiento para aplicaciones de React. Permite crear aplicaciones de una sola página (SPA) con navegación basada en URL, lo que significa que el contenido se carga dinámicamente sin tener que recargar la página.
Cómo funciona React Router
React Router utiliza el componente BrowserRouter para establecer la configuración de enrutamiento en la aplicación. Este componente crea una API de navegación que se puede utilizar para cambiar el contenido de la página según la URL actual.
Para configurar el enrutamiento en una aplicación de React, se deben importar los componentes Route y Switch de la librería React Router. El componente Route se utiliza para definir una ruta y el componente Switch se utiliza para envolver las rutas y determinar la ruta actual.
Cuando se define una ruta utilizando el componente Route, se especifica la URL y el componente que se debe renderizar cuando se accede a esa URL. También se pueden agregar propiedades adicionales al componente Route para configurar la navegación, como la redirección a una URL diferente.
Cuando se accede a una URL en la aplicación, React Router busca la ruta definida en el componente Route correspondiente y renderiza el componente asociado.
Ejemplo de uso de React Router
A continuación, se muestra un ejemplo de cómo se utiliza React Router en una aplicación de React.
Primero, se debe instalar React Router utilizando npm:
npm install react-router-dom
Después de instalar React Router, se debe importar el componente BrowserRouter y los componentes Route y Switch de la librería.
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
Luego, se debe envolver la aplicación en el componente BrowserRouter y definir las rutas utilizando el componente Route.
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
);
}
En este ejemplo, se define una ruta exacta para la URL «/» que renderiza el componente Home. Se definen también rutas para las URL «/about» y «/contact» que renderizan los componentes About y Contact, respectivamente.
También se define una ruta para cualquier otra URL que no coincida con ninguna de las rutas definidas, utilizando el componente Route sin especificar una URL. Este componente utiliza el componente NotFound para renderizar una página de error personalizada.
En el componente Home, se puede utilizar el componente Link de React Router para crear un enlace a otras páginas de la aplicación.
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h1>Inicio</h1>
<p>Bienvenido a la página de inicio.</p>
<Link to="/about">Acerca de</Link>
<Link to="/contact">Contacto</Link>
</div>
);
}
export default Home;
En este ejemplo, se utiliza el componente Link para crear enlaces a las páginas de Acerca de y Contacto. El componente Link utiliza la API de navegación de React Router para cambiar la URL y renderizar la página correspondiente.
