Como hacer routing en React

¿Cómo realizar una navegación entre componentes de React?

Para poder realizar la navegación entre componentes en React, el framework que estamos utilizando en el lado cliente, tiene como prerrequisito principal instalar la librería react router dom.

Comandos necesarios

Para poder usar tanto bootstrap como react router necesitas usar una serie de comandos que debemos instalar para poder utilizar ambas librerías.

Comenzaremos listando los comandos para instalar la librería de react router dom:

npm install --save react-router-dom

Elaboración del proyecto

Una vez tengamos nuestro proyecto creado y estructurado, debemos instalar las librerías necesarias a través de los comandos que hemos puesto en el apartado anterior.

• npm install –save react-router-dom: Este comando lo usamos para poder navegar entre componentes. Para ello nos posicionamos en nuestro proyecto desde el cmd y ejecutamos el comando:

Una vez instalado todo, la estructura de nuestro proyecto debería ser la siguiente:

Dentro de nuestra carpeta assets crearemos una carpeta images, la cual en su interior tendrá subcarpetas con las imágenes de nuestro proyecto:

Seguido nuestra carpeta components tendrá la carpeta App con el component app que nos crea por defecto, la carpeta consolas que crearemos nosotros y donde se encontrarán todos nuestros components y el router.js que usamos para poder navegar entre components:

Nuestro archivo router.js como hemos dicho, es el encargado de realizar la navegación, es necesario realizar un import de BrowserRouter, Switch y Route para poder navegar entre los componentes. Además de importar Component para indicar a React que estoy creando un componente e importar todos los componentes a los que queramos navegar(Esto lo realizaremos solo si el componente esta previamente creado).

• BrowserRouter: BrowserRouter es una implementación de enrutador que utiliza la API de historial HTML5 para mantener su interfaz de usuario sincronizada con la URL. Es el componente principal que se utiliza para almacenar todos los demás componentes.
• MenuConsolas: Nuestro componente menú estático.
• Switch: El componente Switch se utiliza para representar solo la primera ruta que coincide con la ubicación en lugar de representar todas las rutas coincidentes.
• Route: la ruta es el componente que se muestra condicionalmente y que muestra alguna interfaz de usuario cuando su ruta coincide con la URL actual.

Podemos diferenciar dos tipos de ruta.

• Route sin parámetros: Son los más simples se componen por un path y el componente que cargan.
• Route con parámetros: En la url adicionalmente a la ruta a seguir podremos añadir parámetros utilizando la sintaxis ‘/:parámetro’ para posteriormente, en el render, extraerlos y retornar el componente enviando dichos parámetros.

Una vez configurado todo nuestro router, tendremos que dibujarlo en nuestra aplicación, en mi caso lo pintaré en App. Para ello debemos importarlo en App.js para luego poder utilizar la etiqueta <Router/>:

Para poder navegar entro los distintos componentes de nuestro menú lo haremos a través de elementos NavLink o Redirect. Podemos navegar de dos formas con NavLink:

NavLink sin parámetros: Son las más simples en la propiedad ‘to’ pondríamos la ruta entre comillas to=»ruta»:

NavLink con parámetros: En este caso la propiedad ‘to’ podríamos la ruta de la siguiente forma to={«ruta/» + parámetro}

Para recibir los parámetros de un NavLink, el componente lo recibirá mediante props de la siguiente forma:

Para navegar con el Redirect usaremos un evento click, que al pulsar nos mandará al menú home:

Este evento click cambiará el state validar a true, permitiendo ir al home con la etiqueta <Redirect to=’ruta’/>:

Problemas encontrados

A la hora de ejecutar el comando de react router dom se nos puede instalar una versión nueva que es la ‘ ^6.0.1 ‘. Sin embargo, en nuestro proyecto usaremos la versión ‘^5.3.0’, para solucionarlo accedemos al package.json:

En este archivo debemos cambiar la versión de react router dom por la ‘^5.3.0’ como vemos a continuación:

Una vez cambiemos la versión ejecutaremos en la cmd posicionándonos en nuestro proyecto el siguiente comando:

npm install

Autor/a: Andrés Otero Figueiredo

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2021-2022

Código / recursos utilizados / Otros datos de interés: https://github.com/Andrellu/POST