Routing en React (react-router-dom)

¿PARA QUÉ SIRVE ROUTING?

Routing sirve para navegar entre distintos componentes de un proyecto. En React, se utiliza la librería ‘react-router-dom’, la cual hay que instalar manualmente, ya que no está incluido por defecto.

INSTALACIÓN

Desde la línea de comandos, nos dirigimos a la ruta de nuestro proyecto, y escribimos el siguiente comando:

npm install --save react-router-dom

Ejemplo

Para ver el funcionamiento y como implementarlo en un proyecto, usaremos un sencillo ejemplo, que contiene los siguientes componentes:

Home
Gallinas
Vacas
Cerdos

Lo primero que debemos hacer es crear el componente ‘Router.js’, en el cual hay que importar BrowserRouter, Switch y Route de la librería ‘react-router-dom’, y también todos los componentes que vayan a tener una ruta. La estructura sería la siguiente:

Router.js

import React, { Component } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Cerdos from './Granja/Cerdos'
import Gallinas from './Granja/Gallinas'
import Home from './Granja/Home'
import Vacas from './Granja/Vacas'

export default class Router extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/gallinas" component={Gallinas} />
                    <Route exact path="/vacas" component={Vacas} />
                    <Route exact path="/cerdos" component={Cerdos} />
                </Switch>
            </BrowserRouter>
        )
    }
}

Ahora, habría que importar e incluir Router.js en el componente App o en index.js.

import Router from '../Router';
import './App.css';

function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

export default App;

Con esto ya funcionaría el routing en el proyecto, se puede navegar entre componentes cambiando la URL. Para navegar de una manera más sencilla se pueden usar enlaces. Para ello, crearemos un componente que incluya dichos enlaces:

Rutas.js

import React, { Component } from 'react'

export default class Rutas extends Component {
    render() {
        return (
            <div>
                <h1>Rutas</h1>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/gallinas">Gallinas</a></li>
                    <li><a href="/vacas">Vacas</a></li>
                    <li><a href="/cerdos">Cerdos</a></li>
                </ul>
            </div>

        )
    }
}

Parámetros

En las rutas también se pueden pasar parámetros. Los parámetros se escriben en ‘path’. En este caso, no se utiliza el atributo ‘component’, se usa ‘render’, y se escribiría de esta forma:

<Route exact path="/gallinas/:estado" render={props => {
    var estado = props.match.params.estado;
    return <Gallinas estado={estado} />
}} />

En este caso, estado es el parámetro. Hay que ponerlo en el ‘path’ después de la ruta y con dos puntos delante. Podemos poner tantos parámetros como queramos, concatenándolos siguiendo la misma estructura.

Para coger los parámetros, en el atributo render se usa props, y para sacar el valor de cada parámetro se utiliza ‘props.match.params.nombreparámetro‘.

Dentro del componente que recibe los parámetro, se recogen con ‘props’.

this.props.nombreparámetro

NavLink

Para evitar que la página tenga que recargar cada vez que usemos un enlace, podemos utilizar NavLink. Los componentes que utilicen NavLink deben estar en el BrowserRouter de Router.js.

<BrowserRouter>
                <MenuNavLink />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/gallinas" component={Gallinas} />
                    <Route exact path="/vacas" component={Vacas} />
                    <Route exact path="/cerdos" component={Cerdos} />
    
                </Switch>
</BrowserRouter>

Para indicar a que ruta nos lleva, se usa el atributo ‘to’.

<h1>Rutas con NavLink</h1>
<ul>
    <li><NavLink to="/">Home</NavLink></li>
    <li><NavLink to="/gallinas">Gallinas</NavLink></li>
    <li><NavLink to="/vacas">Vacas</NavLink></li>
    <li><NavLink to="/cerdos">Cerdos</NavLink></li>
</ul>

Ya estaría todo configurado para tener routing en nuestro proyecto, espero que os haya servido de ayuda.

Autor/a: George Francis Shinner Rodríguez
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código: GitHub