React router

El módulo react router nos va a permitir navegar por las distintas páginas de nuestra aplicación React. Cuando utilizamos un enlace programado con react router la url del navegador cambiará, sin embargo, la página no se refrescará en su totalidad; sólo serán cargados los componentes correspondientes a la nueva url.

Dicho de otra forma, react router 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 Routes from './application/routes';

export default () => <Routes />;;
src/application/routes.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from '../../pages/home';
import Contacto from '../../pages/contacto';
import Producto from '../../pages/producto';

export default () => (
    <BrowserRouter>
        <Switch>
            { /*Si no usamos el atributo exact bastaría con que el principio de la url coincidiese con alguno de los valores del atributo path para que el componente fuese renderizado. Por tanto, si no usásemos el atributo exact y en la url tuviesemos /contacto, se renderizarían los componentes Home y Contacto simultaneamente */}    
            <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>
);

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 { Link } from 'react-router-dom';

export default () => 
    <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>;

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 webpack.config.js 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";

export default () => {
    const history = useHistory();

    const pulsado = () => {
        history.replace('/');
    }

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

Recogida de parámetros

Recoger un parámetro de React Router

import { useParams } from 'react-router-dom';
...
let { id } = useParams();

Recoger un parámetro del tipo ?param=valor&…

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

import { useLocation } from "react-router-dom";
...
const query = new URLSearchParams(useLocation().search);
  • 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.

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

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

Configuración del fichero .htaccess para evitar errores 404 al refrescar la página

Guardaremos un fichero .htaccess en la carpeta de la aplicación de React que estamos desarrollando.

# Front-controller (exclude static resources)
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_URI} !^/(assets|css|img|js|modules|partials|vendor)/
RewriteRule . index.html [L]
← Aplicación para hacer deporte
Fetch API y Axios →

Aviso Legal | Política de privacidad