Redirecciones en React Router

Introducción

Si es un desarrollador que trabaja en una aplicación web moderna, probablemente sepa lo importante que es configurar el enrutamiento correctamente. Cuando revisa muchos tutoriales de React Router, puede notar que rara vez mencionan las redirecciones y, en cambio, se enfocan en cómo usar el Link Componiendo. Para manejar el enrutamiento en React, podemos usar el paquete react-router-dom.

En este artículo, veremos los muchos métodos y escenarios en los que puede usar redireccionamientos en React. También veremos algunas estrategias anteriores y cómo funcionan con sus nuevos reemplazos en React Router v6, que es la última versión en el momento de escribir este artículo.

requisitos previos

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

$ npm i react-router-dom

Donde

$ yarn add react-router-dom

Componente de redirección y navegación

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

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

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

Con el lanzamiento de React Router v6, el Redirect componente ha sido removido y reemplazado con el Navigate componente, que funciona como el Redirect componente realizado teniendo en cuenta la to prop para permitirle redirigir a la página que especifique.

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

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

Asegúrate de que ya tienes el itinerario. Por ejemplo, si desea redirigir a la ruta "/ página de error", asegúrese de haber declarado la ruta previamente antes de configurando la redirección. Tome nota del pedido o Route declaraciones en el siguiente código:

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

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route
                    path="https://stackabuse.com/"
                    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

Es algo que probablemente necesitará usar al crear aplicaciones web. Los redireccionamientos 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 productos al carrito. Si intentan navegar por la página, deben ser redirigidos a la página de productos para que puedan seleccionar artículos primero.

Esto se llama redirecciones condicionales. Para ello, utilizaríamos el useState() gancho para vaciar la matriz del carro y luego aplicar algunos criterios a nuestra ruta.

const [cartItems, setCartItems] = useState([]);

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

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

Reemplazar URL actual

En algunos casos, es posible que desee anular la URL actual en el navegador en lugar de agregarla (es decir, empujarla) al historial de su navegador, para hacer esto, simplemente necesitamos agregar el replace apoyo para Navigate Componiendo.

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

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

Redirecciones programáticas con useNavigate()

usted puede saber el useHistory() gancho de versiones anteriores del react-router-dom paquete, que se utilizó 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 excelente caso de uso.

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

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

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 usamos el useHistory() gancho, pero en cambio el useNavigate() gancho, que es bastante similar.

Esto también se logra importando el gancho, luego asignando una variable al useNavigate() anzuelo, como hicimos con useHistory(). Ahora podemos usar la variable devuelta para dirigir al usuario a otras páginas.

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

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

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

Conclusión

En este artículo, analizamos varias formas de redirigir con React Router, cómo funcionaba y cómo se manejaba tanto en la versión anterior como en la última v6.

Si quieres conocer otros artículos parecidos a Redirecciones en React Router puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas