Original article: Learn React Router in 5 Minutes - A Beginner's Tutorial

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 ;)