React Router es una biblioteca que permite implementar enrutamiento en aplicaciones React. Con React Router, puedes definir rutas que conectan diferentes componentes con URLs específicas, creando aplicaciones dinámicas de una sola página (SPA).
¿Por qué usar React Router?
En aplicaciones SPA, la navegación entre páginas ocurre sin recargar la página completa. React Router permite:
- Rutas dinámicas: Conectar componentes a diferentes URLs.
- Enrutamiento condicional: Mostrar contenido basado en la ubicación actual.
- Parámetros en rutas: Pasar datos dinámicos a través de la URL.
- Historial de navegación: Manejar navegación programática.
Instalación
Para usar React Router, instálalo en tu proyecto:
npm install react-router-dom
Configuración básica
React Router utiliza varios componentes clave para manejar el enrutamiento:
- ``: Proporciona el contexto para las rutas.
- ``: Envuelve todas las definiciones de rutas.
- ``: Define una ruta específica y el componente que debe renderizar.
- ``: Permite navegar entre rutas sin recargar la página.
Ejemplo básico