14

Qué hay de nuevo en React Router

48374Puntos

hace 2 años

Curso de React Router
Curso de React Router

Curso de React Router

Crea la interfaz de una app con React; maneja los datos con Redux y genera el enrutamiento con React Router. Aprende a mostrar las rutas de las apps de forma dinámica usando la tecnología Server Side Render (SSR) y olvídate de refrescar el sitio cada vez que cambias de ruta.

63% de los JavaScript developers usan React. Ese reporte que viene dentro de la publicación Enterprise JavaScript in 2019, Essential Trends and Analysis queda muy claro que React domina.

A diferencia de Angular o Vue, React no está diseñado para ser un framework, es más una librería únicamente para el desarrollo de interfaces de usuario. Entonces, desarrollar una aplicación usando solamente React es posible, aunque el resultado de esto sería una **Single Page Application, o SPA, una aplicación que solo corre en el lado del navegador y en algunos casos puede quedarse un poco corta.

Añadiendo rutas

Aunque las SPA han tomado bastante fama en los últimos años, sí o sí vas a querer/tener que desarrollar un proyecto con más de una ruta. No basta con crear una Homepage o página de inicio y listo.

Es por ello que nacen alternativas para complementar tu proyecto de React como React Router.

React Router se encuentra en su versión 5, si te encuentras en un proyecto donde utilicen la versión 2 o 3, temo decirte que hay muchísimos cambios desde la versión 4.

Más opciones para Router

Dentro de la versión 3 de React Router solamente teníamos un componente <Router>. Para la versión 4 existen 3 componentes para el Router:

  • <BrowserRouter>: Crea un historial del navegador.
  • <HashRouter>: Crea un historial de hash.
  • <MemoryRouter>: Crea un historial de memoria.

Componente Switch

En la versión 3 creabas tus rutas secundarias y solamente se procesaba la primera que coincidía con la ruta. Para la versión 4 se añade el componente <Switch>, que viene a cumplir la misma funcionalidad, solamente va a renderizar el componente que coincida con la ruta del navegador.

Routes

Dentro de la versión 3 no existía como tal el componente <Route> cómo funciona hoy en día, en su lugar lo que hacía era crear la configuración de las rutas. Tenías que crear un json similar al de abajo:

{
  path: 'contact',
  component: Contact
}

Para la versión 4 el componente se añade a la librería, solamente debes pasarle las props de path y component:

<Route path='contact' component={Contact} />

Este fue el único componente que tuvo cambios en la versión 5, ahora es posible añadir un array dentro del path para tener distintas rutas para una misma página o componente que quieras renderizar:

// React Router 5:
<Route path={["/users/:id", "/profile/:id"]} component={User} />

// React Router 4
<Route path="/users/:id" component={User} />
<Routepath="/profile/:id"component={User} />

A continuación puedes ver una explicación más detallada de todos los cambios y por qué significaron una nueva versión de React Router: https://reacttraining.com/blog/react-router-v5/

Futuro de React Router

React Router tuvo cambios estructurales para su versión 5 Por ejemplo: Ahora los test se hacen tanto para el código fuente como para el código de producción ya compilado.

Dentro de futuras versiones se tiene pensado añadir soporte para React Hooks.


Si actualmente trabajas con un proyecto que utilice React Router 3 o una versión más abajo, ¿Qué esperas para actualizar? Desde ya puedes empezar a ver a profundidad todo sobre la versión 4 en el Curso de React Router.

Cuéntame, ¿Te gustaría que el curso se actualice a la más reciente versión?

Curso de React Router
Curso de React Router

Curso de React Router

Crea la interfaz de una app con React; maneja los datos con Redux y genera el enrutamiento con React Router. Aprende a mostrar las rutas de las apps de forma dinámica usando la tecnología Server Side Render (SSR) y olvídate de refrescar el sitio cada vez que cambias de ruta.
Demian
Demian
demian

48374Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
3494Puntos

Buenas Sres de Platzi, claro q si, seria super q actualizaran el curso a la versión 5.

1
111515Puntos
2 años

Los cambios son mínimos. Si aprendes la versión 4 estás super.

1
57981Puntos

Súper post, ¡gracias por compartirlo!

1
1565Puntos

Muchas gracias por el post.

No sabía que se podía pasar un array como rutas, esto ahorrará muchas líneas en nuestro archivo de rutas.