React Básico

Inicio / Tema / React Básico / React Router: Navegación en Aplicaciones

React Router: Navegación en Aplicaciones

Una de las características más importantes de una aplicación web es la capacidad de navegar entre diferentes páginas o vistas. En React, el manejo de la navegación y las rutas se realiza utilizando React Router, una biblioteca popular que permite crear aplicaciones de una sola página (SPA) con rutas dinámicas.

En este capítulo, aprenderemos cómo configurar React Router, manejar rutas dinámicas, y crear navegación programática.

Instalación de React Router

Para usar React Router en tu proyecto, primero necesitas instalar la librería:

bash

"Este comando instala el react-router-package, que es usado para manejar el routing en aplicaciones React."

React Router DOM es la versión de React Router diseñada para aplicaciones web. Una vez instalada, podemos empezar a definir rutas en nuestra aplicación.

Configuración Básica de Rutas

El primer paso para usar React Router es envolver tu aplicación dentro del componente BrowserRouter. Luego, puedes definir las rutas utilizando los componentes Route y Switch.

Ejemplo de Configuración Básica

jsx

"en este ejemplo, seteamos dos rutas usando React Router. el home route renderiza el componente Home en el path raiz, y el about route renderiza el componente About en el /about path."

En este ejemplo, Switch asegura que solo se renderice la primera ruta que coincida con la URL actual. Route define qué componente renderizar en función de la ruta.

Navegación entre Rutas

Para permitir que los usuarios naveguen entre rutas, puedes utilizar el componente Link en lugar de etiquetas <a>. Esto asegura que la navegación sea manejada por React Router sin recargar la página.

jsx

"Aqui usamos el componente Link para navegar entre las rutas home y about. Clickeando un link va a cambiar la URL sin refrescar la página."

El componente Link crea una navegación fluida sin recargar la página, lo que mejora la experiencia de usuario.

Rutas Dinámicas

React Router permite crear rutas dinámicas que pueden aceptar parámetros, lo que es útil para páginas que dependen de datos específicos, como perfiles de usuario o productos.

Ejemplo de Ruta Dinámica

jsx

"En este ejemplo el componente UserProfile usa el hook useParams para acceder al parametro userId. desde la URL. userId es insertado dinamicamente dentro el contenido de la página"

En este ejemplo, la ruta /user/:userId es dinámica, lo que permite que el componente UserProfile acceda al valor de userId en la URL y lo utilice para mostrar información personalizada.

Navegación Programática

Además de usar Link para la navegación, también puedes navegar programáticamente desde el código utilizando el hook useHistory de React Router. Esto es útil cuando necesitas redirigir al usuario después de una acción, como el envío de un formulario.

Ejemplo de Navegación Programática

jsx

"En este ejemplo la funcion handleLogin usa el hook useHistory para navegar al usuario a la ruta dashboard despued de la accion de login."

El hook useHistory proporciona acceso al historial de navegación, lo que permite redirigir al usuario en función de las acciones que realiza.

Rutas Anidadas

A medida que las aplicaciones crecen, es común tener rutas anidadas donde una página tiene subrutas específicas. React Router permite definir rutas anidadas de forma sencilla.

Ejemplo de Rutas Anidadas

jsx

"En este ejemplo el componente Dashboard contiene su propia ruta para perfiles y settings. estas rutas estan anidadas dentro de la ruta principal del dashboard."

Las rutas anidadas permiten crear estructuras de navegación complejas manteniendo una organización clara en el código.

Redireccionamientos y Ruta por Defecto

React Router también permite redirigir a los usuarios a una ruta específica o definir una ruta por defecto si no se encuentra una ruta coincidente.

Ejemplo de Redireccionamiento

jsx

"En este ejemplo. old-route redirige a los usuarios hacia new-route usando el componente Redirect. adicionalmente definimos una ruta 404 usando un asterisco como una wildcard para rutas sin parear."

El componente Redirect redirige al usuario de una ruta antigua a una nueva, mientras que el uso de * en una ruta permite manejar páginas no encontradas.

Conclusión

React Router es una herramienta poderosa que permite manejar la navegación en aplicaciones React de manera eficiente. Con funciones como rutas dinámicas, navegación programática y rutas anidadas, puedes construir aplicaciones web complejas con una navegación fluida.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea