Uso de React Router DOM 6 en Proyectos React

Clase 3 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Por qué hay tantas versiones de React Router?

React Router ha existido en varias formas a lo largo de los años, lo que ha llevado a muchas versiones. No se trata solo de actualizaciones regulares de una herramienta, sino que ha habido diferentes proyectos y repositorios de React Router. Los primeros ya no se mantienen, están archivados en GitHub como parte de la historia de desarrollo. Sin embargo, React Router DOM surgió posteriormente y sigue siendo el que se usa principalmente hoy en día.

React Router DOM: Ha tenido varias versiones, siendo las más conocidas la 4, la 5 y la 6.
React Router: En algún momento, los creadores originales se separaron y uno de ellos creó una versión con mejoras en accesibilidad y usabilidad. Sin embargo, después se reunieron y actualmente utilizamos React Router DOM 6.

La estructura permanece similar entre versiones, lo que facilita la migración entre diferentes versiones o incluso otros React Routers.

¿Cuál es la estructura general de un React Router?

La estructura básica de un React Router implica varios componentes y conceptos que se repiten en sus versiones, lo cual es fundamental para comprender cómo funciona.

Provider: Funciona muy parecido a React Context. Permite comunicar propiedades, estados y actualizadores de estado entre componentes sin Prop Drilling.
Link: En lugar de etiquetas <a>, se utiliza un componente Link que proviene de la dependencia React Router.
Route: Define las rutas de la aplicación. Utilizando las propiedades path y render (o similar), se determina qué componentes deben renderizarse en cada ruta.

Además, los Routers suelen permitir la inclusión de un Menú o Footer que se renderice en todas las vistas, asegurando una composición constante en la estructura de la aplicación.

¿Cómo se integran los React Routers en las aplicaciones?

La práctica de integrar un React Router puede variar ligeramente, sin embargo, los conceptos básicos son los mismos al usar el enfoque de Create React App.

Instalación: Primero se debe instalar la versión deseada del React Router, en este curso se usa React Router DOM 6.
Configuración: Se configura el Provider y se definen las rutas a través de los componentes específicos como Route y Link.
Tipos de Routers: Cada React Router suele tener diferentes tipos de routers:
- Para Server Side Rendering.
- Para Single Page Applications con Client Side Rendering.

Es esencial elegir el tipo adecuado según las necesidades del proyecto, lo que permite manejar adecuadamente la navegación y el renderizado de la aplicación. En el siguiente paso se aprenderá cómo instalar React Router DOM 6 en un proyecto de Create React App y las diferencias entre los tipos de routers. Esto proporcionará una base sólida para manejar la API y los componentes en proyectos React.

Ignacio Basilio

student•

React Router

Existieron varios “React Routers”, algunos ya están archivados. Hoy utilizamos React Router DOM, las versiones 4 y 5 fueron las más “famosas” y hoy estamos en la versión número 6.

Aparentemente, en el futuro no muy lejano, posiblemente tengamos una nueva herramienta para el manejo de rutas con react. En algún momento existió “Reach Router” que fue una alternativa a React Router.

Estructura de React Router:

Provider: Es parecido al uso que tenía esto en useContext.
Anchor: Una etiqueta para hacer los cambios de “página” en la navegación, son similares a las etiquetas <a></a>.
Conditional render: En el “path” vamos a definir qué componentes se van a renderizar por cada ruta.

Juan Castro

teacher•

Solo una pequeña aclaración: el Provider y el useContext son herramientas complementarias, se necesitan la una a la otra, no podemos usar useContext sin tener un Provider. :D

Ignacio Basilio

student•

Gracias por la aclaracion, Juan <3

Rodrigo Andrés Moreno Pertúz

student•

routes = [ {}, {}, ]

routes.map(() => <Route path={} render={} />)

los mas cheatos mapeabamos las rutas

brayan zamora

student•

A la fecha ya estamos en la versión 6.4

Rubén Ernesto Aragón Gil

student•

Gualberto Montiel

student•

Hay que verificar cuales son las mejoras o cambios en la nueva version!

Diego Reyes Cabrera

student•

Esto sí es programar una aplicación profesional.

Oscar Enrique Machado Quintana

student•

A la fecha (Septiembre 2023), vamos por la v.6.15.0

Andres Prieto

student•

Ya vamos en la v6.16.0

Jorge Garcia

student•

y ahora existe el enrrutador de next JS, y ese tiene sus cosas y su complejidad.... y mas que ahora ya cambio la doc oficial de react ya no existe CRA se crean con next preact remix y aya en lo escondido vite... todo cambia con el tiempo

Harold Zurita Simon

student•

Versiones de React Router: ¿Por qué son tantas? ¿Cuál elegir?

. No hay solo un React Router, sino que han habido muchos a lo largo de toda la historia. . No solo hubo versiones, también se tuvieron proyectos y repositorios distintos de React Router. Los primeros ya fueron archivados ya no se utilizan, si bien fueron los oficiales hace algunos años, pero después de ellos nació React Router DOM. . Este último lo seguimos utilizando hasta el día de hoy y tuvo varias versiones como la 4, la 5 y la 6, ahora mismo nos encontramos en la versión 6. Es bastante probable que pronto salga la versión 7 o una nueva herramienta completamente alternativa. . También se tiene lo que es Reach router, esto debido a que los creadores originales de React Router DOM en algún momento tomaron caminos diferentes. Una de las personas creó este proyecto con algunos cambios de accesibilidad y de usabilidad que quería implementar en su propio React Router, sin tener que hacer esos cambios en el React Router DOM original. Eventualmente, volvieron a darse la mano y ahora tenemos React Router DOM 6. . Sin importar qué versión de React Router utilicemos, los fundamentos son los mismos. Lo que puede cambiar es el nombre de algún componente, la propiedad específica con la que hacemos alguna función, el nombre de algún hook, entre otros. . Por esta razón vas a poder hacer la migración a otros React Routers sin mayores problemas. . La estructura de los React Routers es el siguiente: .

const App = () => {
	// Provider
	<Router>
		<Menu>
			// Anchor
			<Link to="/">Home</Link>
			<Link to="/blog">Blog</Link>
		</Menu>
		// Conditional render
		<Route path="/" render={<Home />} />
		<Route path="/blog" render={<Blog />} />
	</Router>
}

. Principalmente tenemos a un Provider que en este caso viene siendo <Router></Router>, este tiene un funcionamiento análogo a los providers de React Context, por lo que tendremos distintos componentes que consumen a este provider, incluso podemos tener algunos React Hooks para consumir la información de este provider. . Tenemos algún componente especial para hacer la navegación, en este caso en lugar de usar la etiqueta <a> utilizaremos la etiqueta Link. Este es un link que lo que hace es consumir el provider del router para hacer la navegación sin pasar por el SSR, es decir sin tener que volver a renderizar toda nuestra página otra vez, sino que simplemente hacemos la navegación montando y desmontando los componentes de las rutas que le especifiquemos. . También tenemos otros componentes como <Route></Route> en el que definimos qué componente o qué componentes se deberían de renderizar en cada ruta de nuestra aplicación. En la propiedad path se define la ruta, y en la propiedad render se define lo que queremos renderizar. . Donde definamos las rutas es donde vamos a tener el Conditional render, es decir que vamos a renderizar uno o otro componente dependiendo de la ruta en el que estemos, por lo cual utilizamos ese componente Route. . Podemos notar que tenemos un componente Menu por encima de nuestros componentes Route. Esto significa que en la mayoría de casos podemos decirle a React Router que renderice algo en todas las vistas. Gracias a ello, el contenido principal puede ser dinámico dependiendo de la ruta en el que estemos, sin embargo podemos tener ciertos componentes como el Menu que queremos que se encuentren en todas las vistas o rutas.

Jorge Isaac Villa Lopez

student•

yo desarrolle un producto en la que necesitaba utilizar router. despliegue la APP en varios componentes pero no me salía con este método por lo que me toco hacer el scroll al componente con HTML puro. fue un poco enredado porque literal creo que me toco utilizar portales, pero bueno... tengo muchas expectativas con este curso.

Charles Duck Castillo Rosas

student•

Mis apuntes de Notion💚