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

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.

routes = [
{},
{},
]

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

los mas cheatos mapeabamos las rutas

A la fecha ya estamos en la versión 6.4

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

Esto sí es programar una aplicación profesional.

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

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

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.

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.

Mis apuntes de Notion💚