Redirigir una ruta con React Router

Autor: | Última modificación: 21 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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.

Antes de empezar

Para enseñarte cómo redirigir una ruta con React Router, tomaremos como ejemplo las rutas 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.

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.

function App

return (

<div className=»App»>

<Routes>

<Route path=«/login» element={<LoginPage onLogin={handleLogin}/>} >

<Route path=«/tweets»

element={<TweetsPage isLogged={isLogged} onLogout={handleLogout/>}

/>

</Routes>

</div>

);

}

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

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

<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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!