Redirigir una ruta con React Router

React Router es una librería que se utiliza mucho con las aplicaciones React para definir la navegación de nuestros proyectos. Con esta librería podemos crear una navegación dinámica al declarar, redirigir y anidar rutas a nivel del navegador. Por ello, es muy importante aprender a utilizar esta herramienta para finalizar nuestros proyectos. En este post, te enseñaremos cómo redirigir una ruta con React Router, una acción fundamental para crear una navegación eficiente. También veremos qué es redirect en react.

Antes de empezar

Para enseñarte cómo redirigir una ruta con React Router, tomaremos como ejemplo las rutas en react que hemos creado en nuestro post sobre declarar rutas con React Router. Allí, hemos creado dos rutas teniendo en cuenta las páginas que hemos creado en nuestros posts sobre crear una página de login en React y crear una página listado en React. A continuación, te presentamos las líneas de código con las que hemos declarado estas rutas. Ten presente que esto lo hemos hecho dentro del componente App, en donde renderizamos las distintas páginas de nuestra aplicación con link react router dom.

Recuerda que el componente App es un archivo creado por defecto cuando creamos una aplicación con create-react-app. Si quieres conocer más sobre este proceso, puedes leer nuestros posts sobre crear una aplicación con create-react-app y código de una aplicación creada con create-react-app.

//que es react router
function App 
return (
<div className="Ap">
<Routes>
<Route path="/login" element={<LoginPage onLogin=handleLogin}/>} >
<Route path="/tweets" 
element={<TweetsPage isLogged={isLogged} onLogout={handleLogout/>} 
/>
</Routes>
</div>
);
}
//link react-router-dom

Como puedes ver en las líneas de código anteriores, aquí estamos creando dos rutas completamente nuevas con las claves path. El problema es que estamos perdiendo el home de nuestra aplicación. Es decir, no estamos renderizando ningún elemento con nuestro enlace base. Por tanto, tenemos dos opciones: creamos un elemento que sea renderizado en este enlace base o lo redirigimos a una de las páginas que tenemos. A continuación, te enseñamos cómo redirigir una ruta con React Router.

¿Cómo redirigir una ruta con React Router?

Para redirigir una ruta con React Router, utilizaremos el componente Navigate, uno de los componentes principales de React Router. Este componente nos permite establecer una redirección, ya que, cuando se renderiza, provoca una navegación a una nueva ubicación. Utilizar este componente es tan fácil como crear un nuevo Route con la ruta que queremos redirigir.

Luego, debemos pasar por el element el componente Navigate con la URL a la que queremos redirigir la ruta con redirect en react. Entonces, si lo que queremos es redirigir el path home hacia, por ejemplo, el path «/tweets», bastaría con insertar la siguiente línea de código:

//Redirigir una ruta con React Router
<Route path='/' element={<Navigate to="/tweets"/>

De esta manera, cuando el usuario quiera acceder a la ruta «/», el navegador lo redirigirá a la ruta «/tweets». En este sentido, estamos convirtiendo la ruta /tweets en nuestra home. Esto también lo podríamos lograr usando la ruta tradicional. Es decir, declarar que el path=’/’ renderiza el elemento TweetsPage al que nos lleva la ruta /tweets.

//Redirigir una ruta con React Router
<Route 
path='/'
element={<TweetsPage isLogged={isLogged} onLogout={handleLogin}/>
/>

Sin embargo, utilizar el componente Navigate es mucho más claro, porque nos evita tener que repetir toda la línea de código del elemento TweetsPage. Como puedes haber leído en otros de nuestros post sobre Desarrollo Web, la idea siempre es crear un código eficiente con el que repitamos la menor cantidad de código posible. Esto nos ofrece la posibilidad de tener menos líneas de código y utilizar realmente lo que hemos codificado antes.

Si quieres conocer más sobre React Router y lo que puedes hacer con esta herramienta, te invitamos a revisar nuestros post sobre React Router en nuestro blog sobre desarrollo web. También te recomendamos ir a la documentación oficial de esta librería en la página oficial reactrouter.com.

¿Cuál es el siguiente paso?

Después de leer este post, no solo sabes exactamente cómo redirigir una ruta con React Router, sino que también has dado un paso hacia dominar esta poderosa librería. Ahora, el siguiente paso para convertirte en un experto del desarrollo web es dominar esta y otras herramientas. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con JavaScript, HTML, CSS y muchos más recursos de programación para la web. ¿A qué esperas para dar este paso? ¡Matricúlate ahora y atrévete a cambiar tu vida!