Curso de React | 17. 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.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

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.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

src/pages/Home.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

./src/pages/Page2.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

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.

Configurar un Layout Copy

./src/components/Layout/Layout.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

./src/app/Router.jsx

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

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 Copy

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

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

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

    const pulsado = () => {
        navigate('/page2');
    }

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

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

Puedes consultar como hacerlo en esta otra lección.

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>
);

Rutas privadas

Permitir o denegar el acceso en función de si el usuario está autentificado

Esta parte con Auth0 ya viene de serie ( función withAuthenticationRequired). Si usas firebase, debes programarla.

Para las rutas de índole privada, utilizaré un enrutamiento ligeramente diferente del habitual.

/app/Router.jsx

<Route exact path="/" element={<PrivateRoute component={Page1} />} />

En el componente PrivateRoute evalúo si el usuario está autentificado. Si lo está devuelvo el componente que toque.

/app/PrivateRoute.jsx

import { useAuth } from '../hooks/use-auth';

const PrivateRoute = ({ component: Component }) => {
    const { isAuthenticated } = useAuth();
    return isAuthenticated && <Component />;
};

export default PrivateRoute;

El state contendrá una propiedad user con los datos del usuario que se ha logueado. Hemos tenido que alimentar previamente el state con estos datos. La propiedad isAuthenticated valdrá true, siempre que la propiedad user no sea null (La doble admiración hace una transformación a booleano de lo que le pongas a la derecha, de tal forma que si es null o undefined, devolverá false).

use-auth.js

import { useContext } from "react";

export const useAuth = () => {
    const [state, setState] = useContext(AppContext);

    return {
        isAuthenticated: !!state.user,
    };
}