Routing en React

En este tutorial vamos a mostrar paso a paso como configurar Routing en React y que será necesario instalar para hacerlo. Pero antes de ello vamos a meternos en contexto.

¿Qué es React?

React es una tecnología JavaScript que se usa para crear aplicaciones web de una sola página. Para ello usa una plantilla que puede contener distintos componentes que se muestran como parte de la página. ¿Y si quiero que cambien? Sería necesario usar Routing.

¿Qué es el Routing?

El Routing es una forma de navegar entre componentes como si fuesen páginas independientes. Para configurar el Routing en React es necesario instalar la librería «router-react-dom» dentro del proyecto.

Instalación

En primer lugar, abrimos el cmd y entramos en la ruta de nuestro proyecto con el comando cd [ruta].

cd C:\Users\Eunoe\Documents\React\routingreact

Sobre nuestro proyecto instalamos la librería «router-react-dom».

npm install router-react-dom --save

Por último, abrimos nuestra aplicación en Visual Studio Code.

code .

Ejemplo

Para centrarnos en el funcionamiento de una manera sencilla dejo el enlace de GitHub de la carpeta src de mi proyecto con componentes creados. Ver proyecto

El proyecto tiene los siguientes componentes:

• Home: Página de inicio.
• Alumnos: Muestra una lista de alumnos.
• Alumno: Recibe la posición del alumno y muestra datos de ese alumno.
• Clases: Muestra una lista de clases.
• Clase: Recibe el nombre de una clase y muestra los alumnos que hay en ella.

Puedes sustituir la carpeta src del proyecto creado por la mía o crear tus propios componentes de cero.

¿Cómo lo configuro?

Para ello vamos a crear el componente Router.js sobre la carpeta src de nuestro proyecto. En este archivo indicaremos que componente se cargará al escribir cada ruta.

Router.js

Para empezar, escribimos la estructura del componente.

import React, { Component } from "react";

export default class Router extends Component {
  render() {
    return ();
  }
}

Posteriormente, debajo de la primera línea, importamos BrowserRouter, Route y Switch de la librería «react-router-dom» y todos los componentes que vayamos a usar.

//Libreria router-react-dom
import { BrowserRouter, Route, Switch } from "react-router-dom";

//Componentes propios
import Home from "./components/Home/Home";
import Alumnos from "./components/Alumnos/Alumnos";
import Alumno from "./components/Alumno/Alumno";
import Clases from "./components/Clases/Clases";
import Clase from "./components/Clase/Clase";

Después, dentro del return, escribiremos lo siguiente:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />   
    <Route exact path="/alumnos" component={Alumnos} />
    <Route exact path="/clases" component={Clases} />
  </Switch>
</BrowserRouter>

Debes añadir tantas etiquetas Route como componentes tengas, indicando en el path la ruta y en el component el componente que quieres mostrar.

BrowserRouter se encargará de recuperar la ruta y mostrar el contenido que hayamos indicado.

También podemos enviar parámetros al componente a cargar de la siguiente forma:

<Route exact path="/alumno/:posicion" render={
  props => {
    var posicion = props.match.params.posicion;
    return <Alumno posicion={posicion} />;
  }}
/>

En el ejemplo anterior uso mi componente alumno que recibe un parámetro posición.

Dentro del path debemos indicar que recibimos un parámetro con :nombreparametro.

Se pueden recibir varios parámetros. El path sería «/ruta/:param1/:param2» y todos los parámetros que queramos agregar detrás.

Dentro de render podemos obtener el valor del parámetro a enviar con props.match.params.nombreparametro

El render debe devolver la etiqueta del componente a cargar.

Al final el Routing quedará así:

export default class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/alumnos" component={Alumnos} />
          <Route exact path="/clases" component={Clases} />
          <Route
            exact
            path="/alumno/:posicion"
            render={props => {
              var posicion = props.match.params.posicion;
              return <Alumno posicion={posicion} />;
            }}
          />
          <Route
            exact
            path="/clase/:clase"
            render={props => {
              var clase = props.match.params.clase;
              return <Clase clase={clase} />;
            }}
          />
        </Switch>
      </BrowserRouter>
    );
  }
}

Menu.js

Una vez configurado el Router vamos a crear un componente menú. Ver css.

import React, { Component } from "react";
import "./Menu.css";

export default class Menu extends Component {
  render() {
    return (
      <div>
        <nav>
          <ul>
            <li> <a href="/">Home</a> </li>
            <li> <a href="/clases">Clases</a> </li>
            <li> <a href="/alumnos">Alumnos</a> </li>
          </ul>
        </nav>
      </div>
    );
  }
}

En las etiquetas a debemos indicar mediante la propiedad href las rutas que hemos configurado anteriormente en el routing. En caso de enviar parámetros la ruta será similar a esta:

<a href="/alumno/3">Alumno en posición 3</a>

Si miramos el componente Alumnos o Clases podremos ver estos enlaces.

App.js

Una vez configurado el Router y creado el menú vamos a App.js. Debemos importar el componente Menu y el componente Router. Después, dentro del return escribiremos lo siguiente:

<div>
  <Menu></Menu>
  <div className="App">
    <Router></Router>
  </div>
</div>

La etiqueta Router mostrará el contenido de nuestros componentes al cambiar de url.

Nuestra app ya usa Routing. Ahora, al pulsar sobre cualquier link, el componente cambia.

Podéis ver el proyecto finalizado en GitHub.

Autor/a: Eunoe Sánchez Avilés

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2019-2020