Redirecciones en React Router

Si es un desarrollador que trabaja en cualquier aplicación web moderna, probablemente sepa lo importante que es configurar correctamente el enrutamiento. Cuando navegas por m...

Introducción

Si es un desarrollador que trabaja en cualquier aplicación web moderna, probablemente sepa lo importante que es configurar correctamente el enrutamiento. Cuando navega por muchos tutoriales de React Router, puede notar que rara vez mencionan las redirecciones y, en cambio, se enfocan en cómo usar el componente Link. Para administrar el enrutamiento en React, podemos utilizar el paquete reaccionar-enrutador-dom.

En esta publicación, veremos los muchos métodos y escenarios en los que puede utilizar redireccionamientos en React. También veremos algunas estrategias anteriores y cómo funcionaron con los nuevos reemplazos para ellas en React Router v6, que es la versión más reciente al momento de escribir este artículo.

Requisito previo

En este artículo utilizaremos el paquete react-router-dom, el cual debemos instalar en nuestro proyecto. Esto se logra ejecutando uno de los siguientes comandos en nuestra terminal:

1
$ npm i react-router-dom

o

1
$ yarn add react-router-dom

Componente de redirección y navegación

El componente Redirect generalmente se usaba en versiones anteriores del paquete react-router-dom para hacer redirecciones rápidamente simplemente importando el componente desde react-router-dom y luego haciendo uso del componente proporcionando el to prop, pasando la página a la que desea redirigir.

1
2
3
import { Redirect } from 'react-router-dom';

<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>

Con el lanzamiento de React Router v6, el componente ‘Redirect’ se eliminó y se reemplazó con el componente ‘Navigate’, que funciona igual que el componente ‘Redirect’ tomando el elemento ’to’ para permitirle redirigir a la página que desea. especificar.

1
2
3
import { Navigate } from 'react-router-dom';

<Route path="/redirect" element={ <Navigate to="/error-page" /> } />

Asegúrate de que ya tienes la ruta. Por ejemplo, si va a redirigir a la ruta "/página de error", asegúrese de haber declarado la ruta previamente antes de configurar la redirección. Tome nota de las declaraciones de orden o Ruta en el siguiente código:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ErrorPage from './ErrorPage';
import Home from './Home';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route
                    path="/"
                    element={ <Home /> }
                />
                {/* The next line is very important for the Navigate component to work */}
                <Route
                    path="/error-page"
                    element={ <ErrorPage /> }
                />
                <Route
                    path="/redirect"
                    element={ <Navigate to="/error-page" /> }
                />
            </Routes>
        </BrowserRouter>
    );
}
export default App;

Redirecciones condicionales

Esto es algo que probablemente necesitará usar cuando construya aplicaciones web. Las redirecciones condicionales son simplemente enrutamiento basado en ciertos criterios. Un escenario común podría ser cuando está creando una plataforma de comercio electrónico y no desea que los usuarios tengan acceso a ciertos componentes/modales/formularios, como el modal/componente de pago, hasta que hayan agregado algunos productos al carrito. Si intentan entrar a la fuerza en la página, deben ser redirigidos a la página de productos para que puedan seleccionar primero los artículos.

Esto se conoce como redirecciones condicionales. Para hacer esto, usaríamos el gancho useState() para vaciar la matriz del carrito y luego aplicar algunos criterios a nuestra ruta.

1
2
3
4
5
6
const [cartItems, setCartItems] = useState([]);

<Route
    path="/checkout"
    element={ cartItems.length < 1 ? <Navigate to="/products" /> : <Checkout /> }
/>;

En este ejemplo, siempre que esta matriz esté vacía, no podremos acceder a la ruta /checkout hasta que haya al menos un elemento en la matriz cartItems.

Reemplazo de la URL actual

En algunos casos, es posible que desee reemplazar la URL actual en el navegador en lugar de agregarla (es decir, empujarla) al historial de su navegador, para hacer esto, simplemente tenemos que agregar el complemento reemplazar al componente Navegar .

1
<Navigate replace to="/error-page" />

Sin este accesorio, el navegador realizará un seguimiento del historial, incluido el redireccionamiento.

Redireccionamientos programáticos con useNavigate()

Es posible que esté familiarizado con el enlace useHistory() de versiones anteriores del paquete react-router-dom, que se usaba para redirigir a los usuarios mediante programación. Cuando los visitantes han terminado de completar un formulario, o si desea agregar una función de redireccionamiento a un botón, este es un gran caso de uso.

El gancho useHistory() primero se importa y luego se asigna a una variable, que posteriormente se utiliza en un botón (por ejemplo) para redirigir a los usuarios una vez que se realiza una acción específica. Usando el evento onClick, podemos llamar al método .push() para decirle a React Router a dónde queremos que se redirija el botón.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { useHistory } from 'react-router-dom';

const Home = () => {
    const history = useHistory();
    return (
        {/* ... */}
        <button onClick={() => history.push('/products')}>
        {/* ... */}
    );
};

Con el lanzamiento de React Router v6, ya no utilizamos el enlace useHistory(), sino el enlace useNavigate(), que es bastante similar.

Esto también se logra importando el gancho y luego asignando una variable al gancho useNavigate(), como hicimos con useHistory(). Ahora podemos utilizar la variable que se devolvió para navegar al usuario a otras páginas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { useNavigate } from 'react-router-dom';

const Home = () => {
    const navigate = useNavigate();
    return (
        {/* ... */}
        <button onClick={() => navigate('/products')}>
        {/* ... */}
    );
};

{.icon aria-hidden=“true”}

Nota: A diferencia del hook useHistory(), esto no requiere llamar al método push. Todo lo que tenemos que hacer es pasar la ruta como argumento a la función navegar.

Conclusión

En esta publicación, analizamos varias formas de redirigir con React Router, cómo funciona y cómo se manejó esto tanto en la versión anterior como en la última versión v6.