Enrutando en React (React Router v4)

react-router.md

Hoy veremos una librería que para crear rutas en nuestra aplicación. Esta librería es react-router-dom.

Hoy nos enfocaremos en la parte web de esta librería, que actualmente se encuentra en la versión ^6. Para estas nuevas versiones, react-router cambia un poco su filosofía, haciendo diferenciación entre el enrutamiento estático que usaban anteriormente y el enrutamiento dinámico actual.

¿Qué es enrutamiento estático?

Este es el enrutamiento más común, si alguna vez hemos trabajado con rutas en algún otro lenguaje de programación o con algún otro framework, seguramente lo habremos hecho usando enrutamiento estático.

En este, las rutas son definidas al momento en que nuestra aplicación es inicializada. Es decir, antes que nuestra aplicación se renderice.

¿Qué es enrutamiento dinámico?

Este es el tipo de enrutamiento usado por react-router. A diferencia de el enrutamiento estático, este toma lugar en el momento en que nuestra aplicación se está renderizando. Esto gracias a que react-router hace uso de componentes para definir sus rutas.

Los componentes que se encargan de mostrar las diferentes rutas siempre renderizan. Algunas veces renderizan un componente y otras veces null, todo dependiendo de la locación.

Componentes

Ahora que sabemos que React Router utiliza componentes, miremos algunos de ellos y que podemos hacer a través de algunos ejemplos:

BrowserRouter

Es una envoltura para nuestra aplicación. Esta envoltura nos da acceso al API de historia de HTML5 para mantener nuestra interfaz gráfica en sincronía con la locación actual o URL. Debemos tener en cuenta que esta envoltura solo puede tener un hijo. Por lo general es Switch.

Routes

Este componente, causa que solo se renderice el primer hijo Route o Redirect que coincida con la locación o URL actual.

En el caso que no usemos Switch todas las rutas que cumplan con la condición se renderizarán.

Route

Para definir las diferentes rutas de nuestra aplicación, podemos usar el componente Route. La función de este componente es elegir que renderizar según la locación actual. Este es el caso que vimos anteriormente, todos los componentes Route siempre renderizan, pero algunas veces renderizan un componente y otras veces retornan null.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import HomePage from './pages/Home'
import AboutPage from './pages/About'
import PostDetailPage from './pages/PostDetail'

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/about' element={<AboutPage />} />
        <Route path='/post/:id' element={<PostDetailPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App

en caso que la locación actual sea www.dominio.com/index se mostrara la segunda ruta en el ejemplo anterior, aunque en este caso no le estamos asignando ningún componente a renderizar cuando esto suceda.

Este componente recibe las siguientes propiedades:

• path: la ruta en la que se renderizará el componente en forma de cadena de texto
• element: recibe un componente a renderizar. Crea un nuevo elemento de React cada vez. Esto causa que el componente se monte y desmonte cada vez (no actualiza).

Link

Ya hemos configurado nuestras rutas, pero aún no tenemos forma de navegar por nuestra aplicación. Si queremos cambiar de un componente a otro nos tocaría navegar cambiando la URL de manera manual.

Link crea un hipervínculo que nos permite navegar por nuestra aplicación. Al contrario de Redirect, este agrega una nueva locación a la historia.

Recibe las siguientes propiedades:

• to: una locación en forma de cadena de text. Esta será la locación a la que navegaremos cuando le damos click a un hipervínculos.

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

import './NavBar.css';

const NavBar = () => {
   return (
      <div className="NavBar">
        <div className="link-container">
          <Link to="/page1" className="link">Página 1</Link>
        </div>
        <div className="link-container">
          <Link to="/page2" className="link">Página 2</Link>
        </div>
      </div>
    );
}
export default NavBar;

En Resumen

React Router nos provee todos los componentes necesarios para hacer que nuestra SPA (single page application) se mantenga en sincronía con nuestra locación actual.

BrowserRouter, Routes, Route y Link, son los componentes más básicos y obligatorios, y son solo algunos de los componentes que tenemos a nuestra disposición a la hora de trabajar con rutas en React (visita la documentación oficial de react-router para ver más: React Router).