React Router: ¿Cómo usar las rutas en React? - Parte I

Bienvenido al artículo "React Router – ¿Cómo usar las rutas en React?", desarrollado por Antônio André. En este artículo, aprenderás a usar las Rutas en React y cómo pueden agilizar el desarrollo de diversas aplicaciones web. Este recurso tiene un papel fundamental al permitir la navegación entre diferentes páginas sin la necesidad de actualizar la página del navegador.

Al usar las Rutas, puedes mejorar considerablemente el flujo de navegabilidad de tu aplicación web. Por lo tanto, las Rutas son indispensables cuando hablamos de proyectos que requieren un flujo de navegación entre diferentes páginas, pero todas están integradas en el contexto de desarrollo de la aplicación. Estas páginas son conocidas como SPAs, es decir, Aplicaciones de Página Única (Single Page Application).

¡Así que empecemos y aprendamos a utilizar las Rutas en React en tu proyecto de manera práctica!

Requisitos deseables

• Conocimiento intermedio/avanzado en JavaScript.
• Conocimiento básico en CSS o algún otro preprocesador CSS (como SASS, por ejemplo).
• Conocimiento intermedio en React.
  

Requisitos obligatorios

• VS Code: Asegúrate de tener instalado Visual Studio Code en tu computadora. Es una herramienta de desarrollo de código fuente popular y ampliamente utilizada.
• Vite: En este artículo utilizaremos Vite como el entorno de desarrollo, por lo que es importante saber cómo iniciar un proyecto React con Vite.
• Node.js: Node.js es necesario para ejecutar los comandos NPM (gestor de paquetes) y NPX (ejecución de scripts). Si aún no tienes Node.js en tu sistema, puedes descargarlo aquí. Al instalarlo, tanto Node.js como NPM se instalarán automáticamente. Para verificar si se instalaron correctamente, sigue estos pasos:
• Abre Visual Studio Code.
• Abre el terminal de Visual Studio Code.
• En el terminal, ejecuta el siguiente comando (sin comillas): "node -v". Esto mostrará la versión actualmente instalada de Node.js.
• Repite el mismo procedimiento para verificar la versión de NPM. Ejecuta el siguiente comando en el terminal (sin comillas): "npm -v".
  

Repositorio completo del artículo en Github

Haz clic aquí para acceder al repositorio. (https://github.com/AntonioAndreDev/rotas-no-react-revelo)

Iniciando el proyecto con Vite

Nota: Puedes nombrar los archivos y carpetas como prefieras, no es obligatorio seguir estrictamente la nomenclatura, pero por recomendación sugiero que los nombres sean iguales para evitar futuros conflictos y confusiones.

Estructura de los archivos y carpetas

Por ahora, la estructura de archivos y carpetas debe estar de esta forma:

Creando la base de datos

Dado que se trata de un proyecto Frontend, crearemos un archivo database.json ppara simular una base de datos. Evidentemente, en una situación real de producción, esta información provendría de una base de datos específica.

Si sabes cómo hacer esta integración con el Backend, siéntete libre de hacerlo, pero no es el enfoque aquí.

Dentro del archivo database.json debe contener el siguiente código JSON:

Por lo tanto, las carpetas y archivos quedarán así:

Creando las rutas

El siguiente paso es crear un nuevo archivo llamado router.jsx dentro de la carpeta src. Este archivo será el encargado de gestionar y crear todas las rutas y caminos que estarán disponibles dentro de la aplicación. Luego, es necesario hacer la instalación vía NPM de React Router Dom. Para ello, instala esta dependencia usando el comando: npm install react-router-dom. Después, usaremos el método createBrowserRouter(). Para ello, incluimos este código:

Una vez hecho esto, es necesario crear las rutas que se utilizarán en la aplicación. Estas rutas se pasan a través de un array de objetos dentro del método que creamos anteriormente. Antes de avanzar, te explicaré rápidamente las propiedades que utilizaremos:

Path: Es el camino de la ruta que utilizaremos;

Element: Es la página que estará asociada al camino de la ruta.

Así, el archivo router.jsx quedará de la siguiente manera:

Usando las rutas

Después de haber creado las rutas, lo siguiente es utilizarlas. Para hacerlo, podemos eliminar todo el contenido del archiv App.jsx y agregar un componente llamado RouterProvider, disponible en React Router Dom, pasando como valor de la prop router el archivo router, que contiene las rutas que creamos previamente. Quedaría así:

Creando las páginas para cada ruta

Ya hemos hecho toda la configuración básica, y ahora, si te diste cuenta, en el archivo router.jsx no creamos algunos componentes/páginas porque vamos a hacerlo ahora. En esta etapa, utilizaremos los archivos que estarán dentro de una carpeta que crearemos llamada pages. Algunos desarrolladores prefieren usar otros nombres, como: views, screens, entre otros.

Dentro de la carpeta pages estarán todos nuestros archivos, es decir, los elements que definimos en el archivo router.jsx. Así quedará la estructura de archivos y carpetas:

Ahora, coloca el contenido de cada archivo:

OBSERVACIÓN IMPORTANTE: en el archivo index.css reemplaza el body por este código:

OBSERVACIÓN IMPORTANTE: en el archivo router.jsx importa correctamente cada elemento, de esta manera:

Visualizando el proyecto en el entorno de desarrollo - 1

Ahora podemos visualizar cómo va quedando el proyecto en el entorno de desarrollo. Para eso, ejecuta el proyecto en tu navegador para que puedas verlo. Por ahora, debería verse así:

Puedes visualizar las páginas de las otras rutas ingresando en la URL los caminos /products

O /cart

Si te das cuenta, al navegar entre las páginas cambiando la URL, el comportamiento de actualizar la página al cambiar de ruta sigue ocurriendo, pero esto no es lo que queremos.

Navegando entre las rutas sin actualizar la página

Vamos a utilizar otro recurso que React Router Dom ofrece: el componente Link, que funciona como la etiqueta <a><a/>, pero con la diferencia de que solo se usa para redirecciones internas, es decir, dentro de la aplicación, y evita el comportamiento predeterminado de actualizar la página.

Para esto, vamos a crear una carpeta llamada components y dentro de ella crearemos un archivo llamado Header.jsx.

Dentro del archivo Header.jsx agregamos el siguiente código:

Después de este procedimiento, reutilizaremos este componente en todas nuestras páginas de las rutas creadas, quedando respectivamente así: Cart.jsx, Home.jsx, Products.jsx

Al finalizar esta etapa, puedes volver a tu navegador y verificar que, al hacer clic en cualquier enlace del header, el navegador no actualizará la página. Esto permite una excelente experiencia de navegación para el usuario.

OBERVACIÓN IMPORTANTE: haz la corrección del body en el archivo index.css para:

Reutilizando un diseño estándar usando children

Como habrás notado, el header de nuestra aplicación es un componente que se repite en cualquier página de la ruta. Debido a esto, podemos usar un recurso más avanzado que ofrece React Router Dom: la propiedad children. Sirve para reutilizar un diseño estándar en diferentes rutas.

Creando un diseño estándar para las rutas

Dentro de la carpeta pages, crearemos un archivo llamado RootLayout, que será el diseño estándar de las rutas.

En el archivo RootLayout.jsx utilizaremos otro componente llamado Outlet, que indica en qué parte se deben renderizar los elements dentro de este diseño estándar:

Reutilizando el diseño estándar usando children

Dentro del archivo router.jsx haremos algunas modificaciones:

En el camino raíz del proyecto, el element pasará a ser el diseño estándar, que es el archivo RootLayout.jsx. Al hacer esto, significa que todos los hijos de esta ruta heredarán ese diseño estándar en otras rutas.

Luego, utilizamos la propiedad children que es un array de objetos que define el camino y los elementos que se mostrarán en cada página.

La propiedad index indica la página inicial que se renderizará en el diseño estándar.

El archivo router.jsx quedará de la siguiente manera:

OBSERVACIÓN IMPORTANTE: ya que estamos utilizando un diseño estándar que incluye el componente Header podemos eliminar este componente de los archivos Cart.jsx, Home.jsx y Product.jsx

Visualizando el proyecto en el entorno de desarrollo - 2

Accede a tu navegador y revisa cómo está el proyecto.

Página inicial:

Página de productos:

Página del carrito:

Conclusión

Esta fue la parte 1 del artículo React Router – ¿Cómo usar las rutas en React?

En la parte 2, abordaré cómo usar los parámetros de la URL de tu aplicación utilizando un hook de React. Con este hook, podremos acceder a datos específicos de un producto para ver más detalles sobre él, ¡y todo esto sin la necesidad de actualizar la página!

¡Te espero allí, hasta pronto!