En este tutorial hablaremos sobre qué es React Router y cómo utilizarlo. Luego discutiremos sus funcionalidades y cómo usarlas en tu aplicación de React para navegar y renderizar varios componentes.

Requisitos

• Una aplicación de React
• Un buen entendimiento de qué son los componentes en React.
• Tener instalado Node.js.

React como aplicación de página única (SPA)

Necesitas entender cómo son renderizadas las páginas en una aplicación de React antes de zambullirte en el enrutamiento. Esta sección está dirigida a principiantes –puedes saltártela si ya entiendes qué es una SPA (siglas en inglés para Single Page Application) y cómo se relaciona con React.

Cuando pulsas un enlace en el navegador, en aplicaciones con más de una página, es enviada una petición al servidor antes de que la página HTML se muestre.

En React, el contenido de la página es creado a partir de nuestros componentes. Así que lo que hace React Router es interceptar la petición que se envía al servidor y luego inyectar el contenido dinámicamente desde los componentes que hemos creado.

Esta es la idea general detrás de las SPA, que permiten que el contenido se muestre más rápido sin que la página sea actualizada.

Cuando creas un nuevo proyecto, siempre verás un archivo indice.html en la carpeta public ('pública'). Todo el código que escribas en tu componente Aplicacion, que actúa como componente raíz, se renderiza en este archivo HTML. Esto significa que sólo hay un archivo HTML en el cual será renderizado tu código.  

¿Qué ocurre cuando prefieres renderizar en una página distinta otro componente? ¿Creas un nuevo archivo HTML? La respuesta es no. React Router – como su nombre en inglés indica ('enrutador de React')– te ayudará a dirigirte a o navegar a un componente concreto, y te ayudará a renderizar tu nuevo componente en el archivo indice.html.  

Así que, en una aplicación de página única, cuando se navega a un nuevo componente utilizando React Router, el archivo indice.html será reescrito en función de la lógica del componente.

Cómo instalar React Router

Todo lo que tienes que hacer para instalar React Router 6 es ejecutar npm install react-router-dom@6 en la terminal de tu proyecto y esperar a que se complete la instalación.

Si estás usando yarn, emplea este comando: yarn add react-router-dom@6.

Cómo configurar React Router

Lo primero que hay que hacer, una vez completada la instalación, es conseguir que React Router esté disponible en cualquier parte de tu aplicación.

Para hacer esto, abre el archivo indice.js de la carpeta src (de source, 'fuente' en inglés) e importa (import) BrowserRouter desde react-router-dom, y luego, rodea el componente raíz (el componente Aplicacion) con él.

Este es el aspecto inicial del archivo indice.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './indice.css';
import Aplicacion from './Aplicacion';

ReactDOM.render(
  <React.StrictMode>
    <Aplicacion />
  </React.StrictMode>,
  document.getElementById('raiz')
);

Después de hacer los cambios con React Router, deberías tener lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import './indice.css';
import Aplicacion from './Aplicacion';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Aplicacion />
  </BrowserRouter>,
  document.getElementById("raiz")
);

Todo lo que hemos hecho es reemplazar React.StrictMode por BrowserRouter; que hemos importado primero de react-router-dom.  Ahora las características del enrutador son accesibles desde cualquier parte de tu aplicación.

Cómo redirigir hacia otros componentes

Por fin hemos terminado de configurar las cosas, así que ahora veremos el enrutamiento y la renderización de los diferentes componentes.

Paso 1 - Crea varios componentes

Crearemos de la manera siguiente los componentes Inicio, SobreNosotros y Contacto:

function Inicio() {
  return (
    <div>
      <h1>Esta es la página de inicio</h1>
    </div>
  );
}

export default Inicio;

import React from 'react'

function SobreNosotros() {
    return (
        <div>
            <h1>Esta es la página sobre nosotros</h1>
        </div>
    )
}

export default SobreNosotros

import React from 'react'

function Contacto() {
    return (
        <div>
            <h1>Esta es la página de contacto</h1>
        </div>
    )
}

export default Contacto

Paso 2 - Define las rutas

Dado que el componente Aplicacion actúa como el componente raíz, en dónde se renderiza al principio nuestro código React, vamos a crear todas nuestras rutas en él.

No te preocupes si esto no tiene mucho sentido –lo entenderás mejor después de ver el ejemplo de abajo.

import { Routes, Route } from "react-router-dom"
import Inicio from "./Inicio"
import SobreNosotros from "./SobreNosotros"
import Contacto from "./Contacto"

function Aplicacion() {
  return (
    <div className="Aplicacion">
      <Routes>
        <Route path="/" element={ <Inicio /> } />
        <Route path="sobre-nosotros" element={ <SobreNosotros /> } />
        <Route path="contacto" element={ <Contacto /> } />
      </Routes>
    </div>
  )
}

export default Aplicacion

Primero importaremos las funcionalidades que emplearemos: Routes y Route. A continuación, importaremos todos los componentes a los que necesitamos proporcionar una ruta. Ahora desglosaremos el proceso.

Routes actúa como contenedor padre de todas las rutas individuales que se crearán en nuestra aplicación.

Route se utiliza para crear una única ruta. Recibe dos atributos:

• path, que especifica la ruta URL del componente deseado. Puedes llamar a esta ruta de la manera que quieras. Arriba, habrás notado que el primer nombre de ruta es una barra diagonal (/). Cualquier componente cuya nombre de ruta sea una barra diagonal se mostrará primero, siempre que la aplicación se cargue por vez primera. Esto implica que el componente Inicio será el primero en mostrarse.  
• element, que especifica el componente que debe renderizar el enrutador.

Todo lo que hemos hecho hasta ahora es definir nuestras rutas, y sus direcciones, y ligarlas a sus respectivos componentes.

Si vienes de la versión 5, te habrás dado cuenta de que no estamos usando exact and switch, lo cual es genial.

Paso 3 - Usa Link para navegar a las rutas

Si has estado codificando hasta este punto sin ningún error, tu navegador debería estar mostrando el componente Inicio.

Ahora emplearemos una funcionalidad distinta de React Router para navegar a otras páginas con base en esas rutas y nombres de ruta que hemos creado en el componente Aplicacion. Esto es:  

import { Link } from "react-router-dom";

function Inicio() {
  return (
    <div>
      <h1>Esta es la página de inicio</h1>
      <Link to="sobre-nosotros">Haz clic para ver la página sobre nosotros</Link>
      <Link to="contacto">Haz clic para ver la página de contacto</Link>
    </div>
  );
}

export default Inicio;

El componente Link es similar al elemento anchor (<a>) en HTML. Su atributo to especifica a qué ruta nos lleva el enlace.

Recuerda que hemos creado los nombres de ruta listados en el componente Aplicacion para que cuando hagas clic en el enlace, revise tus rutas y renderice el componente que corresponda a dicho nombre.

Recuerda que siempre debes importar Link desde react-router-dom antes de poder usarlo.

Conclusión

Llegados a este punto, ya hemos visto cómo instalar, configurar y usar las funcionalidades básicas de React Router para poder navegar a diferentes páginas de tu aplicación. Esto cubre, más o menos, lo básico para empezar, pero hay muchas más funcionalidades geniales.

Por ejemplo, podrías emplear useNavigate para empujar a los usuarios a través de varias páginas, o podrías emplear useLocation para obtener la URL actual. De acuerdo, no empezaremos otro tutorial al final del artículo.

Puedes consultar más funcionalidades en la documentación de React Router.

Puedes encontrarme en Twitter @ihechikara2.

¡Disfruta codificando!

A veces solo tienes 5 minutos libres... en lugar de perderlos en las redes sociales, ¡hagamos una introducción de 5 minutos sobre el enrutamiento en React!
En este tutorial aprenderemos los conceptos básicos del enrutamiento en React construyendo la navegación para un sitio web: la tienda de tejidos de punto de Scrimba. No es real, pero quizás algún día... ;)

Por cierto, ¿qué es React-Router?

Muchos sitios web modernos se componen, en realidad, de una sola página; simplemente parecen varias porque contienen componentes que se renderizan como páginas separadas. Normalmente, se denominan aplicaciones de una sola página (SPA, siglas en inglés para Single-Page Application). En esencia, lo que React Router hace es generar determinados componentes en función de la ruta empleada en la URL (por ejemplo, /, para la página de inicio; /sobre-nosotros, para la página de información o acerca de, etc.).

Por ejemplo, podemos utilizar la librería React Router para enlazar www.haz-punto-con-scrimba.com/ (página principal) con www.haz-punto-con-scrimba.com/sobre-nosotros, o www.haz-punto-con-scrimba.com/tienda.

Suena bien... pero ¿cómo se utiliza?

Para emplear React Router, primero tienes que instalarla usando NPM:

npm install react-router-dom

O bien, puedes usar esta zona de juegos en Scrimba que ya tiene escrito el código completo en inglés.

Tendrás que importar BrowserRouter, Route y Switch del paquete react-router-dom:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

En mi ejemplo, enlazo la página de destino con otras dos "páginas" llamadas Tienda y SobreNosotros, que en realidad son tan solo componentes.

En primer lugar, tendrás que configurar tu aplicación para que funcione con React Router. Todo lo que vaya a ser renderizado tendrá que ir dentro del elemento <BrowserRouter>, así que primero envuelve tu aplicación con él. BrowserRouter es el componente que realiza toda la lógica para mostrar los componentes que le proporciones.

// indice.js

ReactDOM.render(
    <BrowserRouter>
        <Aplicacion />
    </BrowserRouter>, 
    document.getElementById('raíz')
)

A continuación, añade el elemento Switch (con las etiquetas de apertura y de cierre) dentro de tu componente Aplicacion. Esto te asegura que solo se mostrará un componente a la vez. Si no lo hacemos así, podríamos usar por defecto el componente Error, que escribiremos más tarde.

function Aplicacion() {
    
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

Ahora es el momento de añadir tus etiquetas <Route>. Estas son los enlaces entre los componentes y deben ser colocadas dentro de las etiquetas <Switch>.

Para decirle a las etiquetas <Route> qué componente debe cargarse, basta con añadir un atributo path ('ruta') y el nombre de dicho componente con el atributo component.

<Route path='/' component={Inicio} />

Muchas URL de páginas de inicio son tan solo el nombre del sitio seguido de "/", por ejemplo, www.haz-punto-con-scrimba.com/. En este caso, añadiremos exact a la etiqueta Route. El motivo es que las otras URL también contienen "/", por lo que si no le decimos a la aplicación que busque tan solo por /, cargará la primera ruta que coincida con el valor del atributo path, y obtendremos así un error bastante difícil de tratar.

function Aplicacion() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Inicio} exact />
                <Route path="/sobre-nosotros" component={SobreNosotros} />
                <Route path="/tienda" component={Tienda} />
            </Switch>
        </main>
    )
}

Ahora importa (import) los componentes dentro de la aplicación. Es posible que quieras tener tus componentes en una carpeta separada, "componentes", y así mantener el código limpio y legible.

import Inicio from './componentes/Inicio';
import SobreNosotros from './componentes/SobreNosotros';
import Tienda from './componentes/Tienda';

Sobre ese mensaje de error que mencioné antes; el que se carga si un usuario escribe una URL incorrecta. Es como una etiqueta normal, pero sin ruta. El componente Error contiene <h1>¡Uy! Página no encontrada</h1>. No te olvides de importarlo en la aplicación.

function Aplicacion() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Inicio} exact />
                <Route path="/sobre-nosotros" component={SobreNosotros} />
                <Route path="/tienda" component={Tienda} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

De momento nuestro sitio web es solo navegable tecleando las URL. Utilizaremos el elemento Link de React Router para añadir al sitio web los enlaces, sobre los que podremos clicar, y configuraremos un nuevo componente llamado BarraNavegacion. Una vez más, no te olvides de importar el nuevo componente a la aplicación.

Ahora añade un enlace, Link, para cada componente de la aplicación y emplea to="URL" para vincularlos.

function BarraNavegacion() {
  return (
    <div>
      <Link to="/">Inicio </Link>
      <Link to="/sobre-nosotros">Sobre nosotros </Link>
      <Link to="/tienda">Compra ahora </Link>
    </div>
  );
};

Ahora tu sitio web tiene enlaces en los que se puede hacer clic, navegar por tu aplicación de una sola página (SPA)

Conclusión

Así que, ahí lo tenemos. Si quieres navegar fácilmente por una aplicación de React, olvídate de las etiquetas de tipo anchor ( <a>enlace</a> ) y añade a tu aplicación la librería React Router. Es limpio, es organizado y hace que añadir o eliminar páginas sea mucho más sencillo.  

Disfruta programando ;)

Emplear iconos es una manera de comunicar visualmente conceptos y significados sin necesidad de palabras. Esto podría usarse para una clasificación, una acción o incluso una advertencia.

¿Cómo podemos añadir iconos a nuestras aplicaciones de React para mejorar nuestro mensaje visual usando SVG?

• ¿Qué es SVG?
• ¿Qué hace que SVG sea genial para la web?
• Parte 0: Creando una aplicación React
• Parte 1: Añadiendo iconos SVG con react-icons
• Parte 2: Añadiendo manualmente archivos SVG a un componente de React

¿Qué es SVG?

SVG son las siglas en inglés de gráficos vectoriales escalables (Scalable Vector Graphics). Es un formato de archivo  –basado en un lenguaje de marcado similar al XML– que permite a programadores y diseñadores crear imágenes vectoriales usando definiciones de rutas.

¿Qué hace que SVG sea genial para la web?

SVG nació para la web. Es un estándar abierto creado por el W3C para proveer de una mejor manera de añadir imágenes a la web. Si abres un archivo SVG en tu ordenador, puede que te sorprenda ver que... ¡Todo es código!

Esto influye en el reducido tamaño del archivo. Normalmente, cuando se utiliza un SVG, te puedes aprovechar de su menor tamaño en comparación con los archivos de imagen, más grandes, que podrían ser necesarios para ofrecer la misma alta resolución.

Además, ya que estamos definiendo los SVG como rutas, pueden agrandarse o reducirse tanto como queramos. Esto los hace aún más flexibles para su uso en la web, especialmente cuando se trata de crear experiencias adaptativas.

¿Qué vamos a crear?

Primero pasaremos a utilizar un paquete llamado react-icons que nos permitirá importar, de una manera fácil y directa, los iconos de conjuntos populares de iconos como Font Awesome.

También echaremos un vistazo a cómo podemos añadir manualmente los archivos SVG a nuestra aplicación; copiando directamente el código de un archivo SVG dentro de un nuevo componente.

Parte 0: Creando una aplicación de React

Para este tutorial, puedes utilizar cualquier framework de React que desees, ya sea Create React App o Next.js. Incluso puedes usar un proyecto existente.

Como no necesitamos nada especial para añadir nuestros iconos, voy a usar create-react-app.

Para ir empezando con Create React App, puedes crear un nuevo proyecto utilizando uno de los comandos siguientes en tu terminal:

yarn create react-app [nombre-de-tu-proyecto]

# o bien

npx create-react-app [nombre-de-tu-proyecto]

Nota: reemplaza [nombre-de-tu-proyecto] por el nombre que quieres emplear para tú proyecto. Yo utilizaré my-svg-icons.

Cuando tengas creada tu aplicación nueva, o tengas ya una aplicación, ¡estaremos listos para continuar!

Parte 1: Añadiendo iconos SVG con react-icons

Añadiendo react-icons a tu proyecto

Para poder empezar con react-icons lo instalaremos primero en nuestro proyecto.

Ejecuta el comando siguiente dentro de tu proyecto:

yarn add react-icons
# o bien
npm install react-icons --save

Una vez completado el proceso, deberíamos poder utilizarlo en nuestro proyecto.

Seleccionando los iconos del proyecto

Una de las cosas interesantes de react-icons es una biblioteca extensa que pone a disposición dentro de un paquete individual.

No solo tenemos inmediatamente accesible Font Awesome, sino también los repositorios de GitHub, Octicons, Heroicons, Material Design Icons, y un montón más.

A la hora de elegir los iconos prácticamente podrías usar el que tú quieras en cualquier momento. Dicho esto, te recomiendo que intentes ser coherente en la apariencia de tus iconos.

Si para tu sitio web utilizas principalmente Font Awesome, podría parecer un poco extraño e incoherente si empezases a añadir Flat Color Icons a la mezcla. En última instancia, lo que quieres es ofrecer una experiencia en la que la gente sea capaz de identificar fácilmente los patrones que has creado.  

Utilizando react-icons en tu proyecto

Una vez que hayas encontrado los iconos que quieres usar, ya podemos añadirlos a nuestro proyecto.

La página web de react-icons nos facilita la búsqueda del nombre del icono que queremos utilizar e importar a nuestro proyecto.

Por ejemplo, si quisiéramos utilizar el icono del cohete [rocket en inglés] de Font Awesome nos posicionaríamos en la barra lateral, nos desplazamos hasta Font Awesome, buscamos "cohete" en la página (con la ayuda de CMD + F, o CTRL + F) y, finalmente, clicamos sobre el icono; lo que copiará su nombre a tú portapapeles.

También podemos buscar "cohete" en el formulario de búsqueda de la parte superior izquierda de la página; lo que nos mostraría el resultado "cohete" en todos los conjuntos de iconos existentes.

Ahora ya podemos importar ese icono dentro de nuestro proyecto. Al igual que en las instrucciones de la parte superior de la página de react-icons, queremos importar ese icono específico react-icons/fa al que se refiere al módulo Font Awesome de react-icons.

En la parte superior del archivo en el que quieras importar el icono añade lo siguiente. Si usas create-react-app para un proyecto nuevo, puedes añadirlo al principio del archivo src/App.js.

import { FaRocket } from 'react-icons/fa';

Para probarlo, sustituyamos el logo de React por nuestro icono.

Elimina el elemento <img y sustitúyelo por:

<FaRocket />

Y si recargamos la página, ¡podremos ver nuestro cohete!

Sin embargo, nuestro cohete no gira como el logo de React, así que vamos a arreglarlo.

Añade la clase .App-logo al componente FaRocket:

<FaRocket className="App-logo" />

¡Y ahora el cohete debería estar girando!

Pero también es un poco pequeño. Si miramos dentro de src/App.css estamos estableciendo la altura de .App-logo a 40vmin. Si bien eso funciona, para que nuestro icono llene el espacio, le tenemos que proporcionar también un ancho.

Para añadir un ancho [width], agrega el código siguiente a la clase CSS .App-logo:

width: 40vmin;

Aunque ahora probablemente sea un poco demasiado grande, ¡ya tenemos nuestro icono y un tamaño más apropiado!

Sigue el proceso en el commit del repositorio.

Parte 2: Añadiendo manualmente archivos SVG a un componente de React

A veces, no querrás añadir una nueva biblioteca solo para conseguir un icono. En ocasiones, se trata de un icono personalizado que no está disponible en una biblioteca pública.

Afortunadamente con React, podemos crear un nuevo componente SVG con bastante facilidad que nos permite añadir nuestros iconos SVG personalizados donde queramos.

Primero, busquemos un icono.

Aunque todos los iconos de Heroicons están disponibles dentro de react-icons, vamos a utilizarlo como ejemplo, ya que es fácil de encontrar y copiar algo de código SVG.

Ve a heroicons.com y busca por un icono que te gustaría usar para este ejemplo. Yo utilizaré "globo terráqueo" [globe].

Después de encontrar el icono que quieres, pasa el ratón por encima del mismo y verás las opciones para copiarlo como SVG o JSX. Pulsa copiar como JSX.

Con ese icono ya copiado, crea un nuevo archivo bajo src llamado Globe.js.

Dentro de ese archivo, crearemos un nuevo componente llamado "Globo" y pegaremos nuestro código SVG dentro del mismo.

import React from 'react';

const Globo = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default Globo;

Nota: al copiar SVG normal dentro de un componente de React, puede que no funcione "tal cual es". A veces, los archivos SVG incluyen clases CSS o atributos que no son válidos con JSX.

Si te encuentras con errores, intenta arreglar los atributos y mira la consola del navegador para ver los errores y las advertencias que React arroja. Como copiamos el icono como JSX, conseguimos hacerlo funcionar de inmediato.

Ahora, vuelve a src/App.js e importa nuestro nuevo componente:

import Globo from './Globo';

A continuación, podemos sustituir el icono del cohete por nuestro nuevo componente:

<Globo />

Y si abrimos nuestro navegador, ¡podremos ver nuestro globo terráqueo!

Aunque es un poco grande.

Queremos aplicar nuestra clase .App-logo a nuestro componente Globo, así que necesitamos actualizar dicho componente para que reciba una prop ('propiedad') className.

Vuelve a src/Globo.js, y añade la propiedad className como argumento:

const Globo = ({ className }) => {

Luego, añade una nueva propiedad con esa className prop ('propiedad') al componente <svg:

<svg className={className}

Ahora, podemos actualizar nuestro componente Globo en src/App.js para incluir esa clase:

<Globo className="App-logo" />

Y si recargamos la página, podremos ver que nuestro logotipo, con el tamaño correcto, está de vuelta y ¡vuelve a girar!

Sigue el proceso en el commit del repositorio.

¿Por qué no lo incluimos como un archivo de imagen?

Aunque podemos incluir el icono como un archivo de imagen, tal y como hace React en el código predeterminado por create-react-app, se obtienen algunas ventajas al añadir nuestros archivos SVG en línea.

Por un lado, cuando añadimos el SVG en línea, podremos acceder a las distintas rutas con las propiedades CSS. Esto nos da más flexibilidad para personalizarlo dinámicamente.

Y, por otro lado, proporcionará menos peticiones HTTP. El navegador sabrá cómo cargar ese archivo SVG, así que no necesitaremos molestar al navegador para que solicite ese archivo para incluirlo en la página.

Dicho esto, sigue siendo una opción válida para añadir un archivo SVG a la página.