React router

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

npm i react-router-dom

Configuración básica Copy

src/app/Router.js

import { BrowserRouter, Route, Routes} from 'react-router-dom';
import Home from '../pages/Home';
import Page2 from '../pages/Page2';

const Router = () => (
    <BrowserRouter>
        <Routes>   
            <Route index element={<Home/>} />
            <Route path="/page2/" element={<Page2/>} />
             { /* 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="*" element={<div>404</div> } />
        </Routes>
    </BrowserRouter>
);

export default Router;

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/App.js

import Router from './app/Router';

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

export default App;

src/pages/Home.js

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

const NavBar= () => 
    <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/page2">Page2</Link></li>
        <li><Link to="/ajksdfkjhasdk">Error en la url</Link></li>
    </ul>;

export default NavBar;

Si deseas resaltar el enlace correspondiente a la página en la que estás, puedes usar la etiqueta NavLink, que añade el class active a dicho enlace.

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

const NavBar= () => 
    <ul>
        <li><NavLink to="/">Home</NavLink></li>
        <li><NavLink to="/page2">Page2</NavLink></li>
        <li><NavLink to="/ajksdfkjhasdk">Error en la url</NavLink></li>
    </ul>;

export default NavBar;

Recogida de parámetros

Recoger un parámetro de React Router

En el enlace:

<Link to="/product/1">Producto 1</Link>

En el Router.js:

<Route path="/product/:id" element={<Product/>} />

En el fichero en el que queremos recoger los datos:

import { useParams } from 'react-router-dom';
...
const { 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');

Redirección desde React

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

import { useNavigate } from "react-router-dom";

const App = () => {
    const navigate = useNavigate();

    const pulsado = () => {
        navigate(process.env.PUBLIC_URL+'/page2');
    }

    return(  
            <button onClick={pulsado}>Pulsame</button>
    )
}
export default App;

Rutas para cuando el proyecto no está en la raíz del servidor

.env

PUBLIC_URL = "/amor"

Router.js

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Routes>
    <Route index element={<Home />} />
    <Route path="page2" element={<Page2 />} />
  </Routes>
</BrowserRouter>

src/pages/Home.js

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

const NavBar = () => 
    <ul>
        <li><Link to="/">Inicio</Link></li>
        <li><Link to="/page2">Page2</Link></li>
        <li><Link to="/ajksdfkjhasdk"}>Error en la url</Link></li>
    </ul>;

export default NavBar;

Configurar un Layout Copy

Router.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import Page2 from '../pages/Page2';
import Layout from './Layout';

const Router = () => (
    <BrowserRouter>
        <Layout>
            <Routes>
                <Route index element={<Home />} />
                <Route path="/page2/" element={<Page2 />} />
            </Routes>
        </Layout>
    </BrowserRouter>
);

export default Router;

Layout.js

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

const Layout = ({ children }) => {
    return (
        <div>
            <h1>Layout</h1>
            <nav>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/page2" >Page 2</Link></li>
                </ul>
            </nav>
            <main>{children}</main>
        </div>
    )
}

export default Layout;

Copy 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_FILENAME} !-f 
RewriteRule . index.html [L]

Enrutar a un enrutamiento

No olvidar, poner la barra con el asterisco en la ruta que enlaza al enrutamiento.

<Route path="swapi/*" element={<Swapi/>} />

No será necesario repetir toda la ruta en el enrutamiento de destino. Para el menú que lleva a la home de este enrutamiento, podemos usar la prop index, en lugar de path=»/».

const Router = () => (
  <Routes>
    <Route index element={<Home/>}/>
    <Route path="profile" element={<Profile/>}/>
    <Route path="*" element={<div>404 Swapi</div>}/>
  </Routes>
);