31. Rutas y navegación en React.js

React.js, una biblioteca de JavaScript para crear interfaces de usuario, es una herramienta increíblemente potente y flexible para desarrolladores de aplicaciones para el usuario. Una de sus características más útiles es el sistema de enrutamiento y navegación, que permite crear aplicaciones de una sola página (SPA) complejas e interactivas. Este capítulo profundizará en cómo configurar y utilizar rutas y navegación en React.js.

Primero, es importante entender qué son las rutas y la navegación. En una aplicación web tradicional, la navegación se realiza cambiando de página. Cada vez que hace clic en un enlace, el servidor envía una nueva página al navegador. Sin embargo, con React.js podemos crear aplicaciones de una sola página donde la navegación se realiza sin recargar la página. En cambio, se renderizan diferentes componentes dependiendo de la ruta actual.

Para comenzar a trabajar con rutas en React.js, necesitará instalar la biblioteca 'react-router-dom'. Esta biblioteca es una extensión de React.js que permite la creación de un sistema de rutas en nuestras aplicaciones. Puedes instalarlo usando el administrador de paquetes npm con el siguiente comando: 'npm install reaccionar-router-dom'.

Una vez instalada la biblioteca, puede comenzar a configurar sus rutas. Las rutas se configuran en un componente especial llamado 'BrowserRouter', que debería abarcar toda su aplicación. Dentro de 'BrowserRouter' puedes usar el componente 'Ruta' para definir tus rutas. Cada 'Ruta' tiene una propiedad 'ruta' que define la ruta URL para la ruta y una propiedad 'componente' que define el componente que debe representarse cuando se accede a la ruta.

<NavegadorEnrutador>
  <Ruta de ruta="/" componente={Inicio} />
  <Ruta de ruta="/about" componente={Acerca de} />
  <Ruta de ruta="/contacto" componente={Contacto} />
</BrowserRouter>

Con este código, cuando el usuario accede a la URL '/', se representa el componente 'Inicio'. Si acceden a '/about', se representa el componente 'Acerca de', y así sucesivamente. Puedes definir tantas rutas como quieras de esta manera.

Para navegar entre rutas, puede utilizar el componente 'Enlace' de la biblioteca 'react-router-dom'. Este componente crea un enlace que, cuando se hace clic, cambia la ruta actual sin recargar la página. La propiedad 'hacia' del 'Enlace' define la ruta a la que debe navegar el enlace.

<Enlace a="/about">Acerca de</Link>
<Enlace a="/contacto">Contacto</Enlace>

Con este código, cuando el usuario hace clic en el enlace 'Acerca de', la ruta cambia a '/acerca de' y se representa el componente 'Acerca de'. De manera similar, cuando hacen clic en 'Contacto', la ruta cambia a '/contacto' y se representa el componente 'Contacto'.

Una cosa importante a tener en cuenta es que 'BrowserRouter' utiliza el historial del navegador para realizar un seguimiento de la ruta actual. Esto significa que el botón Atrás del navegador funcionará como se espera, volviendo a la ruta anterior.

Además, 'react-router-dom' también proporciona otras funciones útiles, como rutas anidadas, rutas parametrizadas y redireccionamientos. Las rutas anidadas le permiten tener rutas dentro de rutas, lo cual es útil para crear interfaces complejas. Las rutas parametrizadas le permiten pasar datos a través de la URL. Y las redirecciones te permiten redirigir al usuario a una ruta diferente.

En resumen, el sistema de navegación y enrutamiento React.js es una poderosa herramienta que le permite crear aplicaciones complejas e interactivas de una sola página. Con la biblioteca 'react-router-dom', puedes configurar fácilmente tus rutas y navegar entre ellas sin recargar la página. Además, 'react-router-dom' proporciona otras funciones útiles para mejorar aún más su aplicación.

Siguiente página del libro electrónico gratuito:

82Introducción a Vue.js

3 minutos