React router

Contactar con el profesor

Nos permite cargar unos componentes u otros en función de la url.

npm i react-router
npm i react-router-dom

Documentación de react-router

Configuración básica

src/App.js
import React from 'react';
import Routes from './application/routes';

const App = () => <Routes />;;

export default App;
src/application/routes.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from '../pages/home';
import Contacto from '../pages/contacto';
import Producto from '../pages/producto';

const Routes = () => (
    <BrowserRouter>
        <Switch>
            { /*El atributo exact significa que ese nodo no afecta a sus descendientes.
             Si no lo ponemos, al escribir /login, accederíamos igualmente a Home */}    
            <Route exact path="/" component={Home} />
            <Route path="/contacto" component={Contacto} />
            <Route path="/producto/:id" component={Producto} />
             { /* Es muy recomendable añadir esta ruta para obtener un mensaje de error en el caso de que la 
            ruta no exista. De lo contrario, si la ruta no existe llegaremos a una página en blanco */}    
            <Route path="*" component={() => <div>404</div> } />
        </Switch>
    </BrowserRouter>
);

export default Routes;

Para recuperar el valor del parámetro id, podemos hacer un console log de las props en la página destino y ahí veremos la propiedad match, en la que estará el valor.

src/pages/home/home.js
import React from 'react';
import { Link } from 'react-router-dom';

const Home = _ => 
    <ul>
        <li><Link to={`/`}>Inicio</Link></li>
        <li><Link to={`/contacto`}>Contacto</Link></li>
        <li><Link to={`/producto/1`}>Producto 1</Link></li>
        <li><Link to={`/ajksdfkjhasdk`}>Error en la url</Link></li>
    </ul>

export default Home;

Cuando hagamos un build del proyecto las rutas definidas en el fichero routes.js, no funcionarán si el proyecto está en una subcarpeta del servidor. Podemos salvar este problema añadiendo el siguiente atributo a la etiqueta <BrowserRouter /> del fichero routes.js

<BrowserRouter basename={'/ruta-en-la-que-esta-el-proyecto-y-que-no-debe-terminar-en-barra'} >

Cómo en nuestro package.json hemos definido la ruta del proyecto, podemos importarla de ahí en lugar de volver a definirla:

<BrowserRouter basename={process.env.PUBLIC_PATH}>

Redirección desde React

Definimos el método que ejecutará la redirección:

import { useHistory } from "react-router-dom";
...
const history = useHistory();
const Contacto = ({ history }) => {
    const pulsado = _ => {
        history.replace('/');
    }

    return(  
            <button onClick={pulsado}>Pulsame</button>
    )
}

Recoger un parámetro enviado con React Router

Para poder usar los métodos de Routes, recuerda que tienes que estár dentro de Routes:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './App';

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="*" component={() => <div>404</div> } />
        </Switch>
    </BrowserRouter>
);

export default Routes;

En la página en la queremos recuperar parámetros de la url, usaremos el siguiente código:

import { useHistory, useLocation } from "react-router-dom";
...
const history = useHistory();
  • useLocation().search accede a los parámetros de la url en la que estamos
  • URLSearchParams alimenta el objeto query, que usaremos para acceder a los parámetros mediante getters y setters.
const query = new URLSearchParams(useLocation().search);

A partir de aquí, cuando querramos recuperar los parámetros de la url:

const questionId = query.get('questionId');

Y para modificar los parámetros de la url haremos:

query.set('favouriteCat', showingFavouriteQuestions);
history.push('?'+query.toString())
← Valores por defecto
Fetch API (axios) →

Aviso Legal | Política de privacidad