Actualizando a la última versión de React Router

Clase 46 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

React Router actualizó su API pública, por eso es necesario que cambiemos como la forma en la que usamos esta librería. Para eso vamos a tomar el proyecto que hicimos y actualizarlo.

Lo primero que vamos a hacer es desinstalarlo con el comando:

npm rm -S react-router

Y luego vamos a instalar react-router-dom con el comando:

npm i -S react-router-dom@next

La razón de instalar react-router-dom y no react-router es que desde ahora React Router va a soportar una versión para aplicaciones web (-dom) tanto en el cliente como en el servidor y una versión para aplicaciones de React Native (-native). En nuestro caso nos vamos a concentrar en la versión para web.

Actualizando el servidor de render

Vamos a ir a source/server.jsx y vamos a dejar de importar react-router, en vez de eso vamos a importar:

import { StaticRouter } from 'react-router-dom';

Acá podemos ver el primer cambio, en vez de importar ServerRouter ahora importamos StaticRouter y ya no necesitamos createServerRenderContext. Luego de cambiar este import vamos cambiar la siguiente línea.

const context = createServerRenderContext();

Y vamos a colocar:

const context = {};

Como vemos es simplemente crear un objeto vacío en vez de ejecutar una función. Luego tenemos que modificar donde hacemos el renderToString para usar StaticRouter quedando algo así:

const html = renderToString(
	<Provider store={store}>
		<IntlProvider locale={locale} messages={messages[locale]}>
			<StaticRouter location={request.url} context={context}>
				<Pages />
			</StaticRouter>
		</IntlProvider>
	</Provider>,
);

De esta forma ya estamos haciendo el render con los nuevos componentes de React Router. Ahorat tenemos que eliminar la línea donde obteníamos el resultado del contexto.

const result = context.getResult();

Ya que el resultado va a estar directamente en el objecto context que creamos antes. De igual forma vamos a cambiar la validación de result.missed por context.url y vamos a usar este mismo context.url donde antes definíamos el Location al hacer redirect. Quedando algo similar a esto:

if (context.url) {
	response.writeHead(301, {
		Location: context.url,
	});
	response.end();
}

Un último cambio es que React Router ya nos dice si no encontró la URL (un 404) por lo que tanto la condición como el doble render que había que hacer es innecesario y podemos eliminarlos.

Actualizando nuestras rutas

Lo siguiente que vamos a actualizar es el archivo source/pages/containers/Page.jsx. Al igual que antes vamos a cambiar la línea donde importamos React Router quedando así:

import {
	Route,
	Switch,
} from 'react-router-dom';

Como vemos en vez de Match y Miss importamos Route y Switch. Luego en todos los lugares donde usábamos Match y Miss tenemos que usar Route quedando así:

{/* List de artículos */}
<Route
	path="/"
	exact
	component={Home}
/>
{/* Detalle de artículo */}
<Route
	path="/post/:id"
	exact
	component={Post}
/>
{/* Perfil de usuario */}
<Route
	path="/user/:id"
	exact
	component={Profile}
/>
{/* Galería de fotos */}
<Route
	path="/gallery"
	exact
	component={Gallery}
/>
{/* Error 404 */}
<Route component={Error404} />

Como vemos el prop pattern ahora se llama path y exactly es exact. El resto de props es igual. Otra cosa que vamos a hacer es envolver todos estos componente en Switch.

Este componente Switch lo que hace es que una vez una de las rutas haga render deja de verificar las otras rutas de la aplicación. Sin usar este componente React Router verificaría cada ruta definidia y si más de un componente hacía match entonces renderizaba todos esos componentes (pudiendo ser N). Switch nos evita eso completamente, solo permitiendo una ruta.

El código de nuestro componente Page quedaría algo así al final:

function Pages() {
	return (
		<main role="application">
			<Header />

			<Switch>
				{/* List de artículos */}
				<Route
					path="/"
					exact
					component={Home}
				/>
				{/* Detalle de artículo */}
				<Route
					path="/post/:id"
					exact
					component={Post}
				/>
				{/* Perfil de usuario */}
				<Route
					path="/user/:id"
					exact
					component={Profile}
				/>
				{/* Galería de fotos */}
				<Route
					path="/gallery"
					exact
					component={Gallery}
				/>
				{/* Error 404 */}
				<Route component={Error404} />
			</Switch>
		</main>
	);
}

Importando el componente Link y BrowserRouter

Lo siguiente que vamos a hacer es muy simple, en todos los lugares donde importamos Link de React Router vamos a cambiar el import y vamos a usar la siguiente línea:

import { Link } from 'react-router-dom';

Simplemente es importar Link de react-router-dom. Luego vamos a ir a source/client.jsx y vamos a cambiar el import de BrowserRouter para importarlo de react-router-dom.

import { BrowserRouter } from 'react-router-dom';

Con esto ya cambiamos todos los imports necesarios y estamos usando los nuevos componentes de React Router. Hay un último cambio que hacer y es cambiar un dato dentro de dos de nuestras página.

Obteniendo parámetros de la URL

En los componentes source/pages/containers/Post.jsx y source/pages/containers/Profile.jsx obteníamos un prop llamado params que era un objeto con todos los parámetros de la URL, como por ejemplo el id del post o usuario cuyo detalle estábamos viendo. Ahora para poder acceder a este datos es necesario usar un prop llamado match que posee el objeto params.

Eso significa que ahora el initialFetch de Post.jsx va a hacer el fetch de la siguiente forma:

const [
  post,
  comments,
] = await Promise.all([
  api.posts.getSingle(this.props.match.params.id),
  api.posts.getComments(this.props.match.params.id),
]);

Y el initialFetch de Profile.jsx va a hacerlo así:

const [
  user,
  posts,
] = await Promise.all([
  api.users.getSingle(this.props.match.params.id),
  api.users.getPosts(this.props.match.params.id),
]);

Y a su vez el propTypes de ambos componentes va a ser el tener el siguiente:

match: PropTypes.shape({
  params: PropTypes.shape({
    id: PropTypes.string,
  }),
}),

Conclusiones

Con esto ahora ya toda nuestra aplicación debería funcionar con la última versión de React Router sin problemas. Este tipo de casos donde una librería se actualice y cambio su API pública es algo común en el mundo de JavaScript y como desarrolladores es parte de nuestro trabajo mantenernos al tanto y actualizar nuestro código para estar al día con las últimas versiones.

No consideren esto como un problema o algo malo, sino como algo natural y hasta deseable, ya que significa que las librerías o frameworks que usemos están mejorando y evolucionando.

Rodrigo Burgos S.

student•

Hola, tengo el último problema, no entendí bien la última parte de “Obteniendo parámetros de la URL”, por que, qué son los “initialFetch” y “propTypes”?. Lo segundo, en la terminal me sale lo siguiente:

<code> MBP-de-Bubba:reactjs Bubba$ node built/server/index.js
/Users/Bubba/Dropbox/reactjs/built/server/index.js:23782
		Provider,
		^

ReferenceError: Provider is not defined
    at Server.requestHandler (/Users/Bubba/Dropbox/reactjs/built/server/index.js:23782:3)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:547:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)
MBP-de-Bubba:reactjs Bubba$

Sergio Daniel Xalambrí

student•

El initialFetch y los propTypes los vemos en el desarrollo del proyecto, si todavía no llegaste a esa parte te recomiendo que sigas con el proyecto usando al versión de React Router usada en el curso y luego al final hagas la actualización.

Sobre el otro error, pareciera que no importantes bien Provider de react-redux.

Guillermo Santisteban Guerrero

student•

Yo también tengo ese mismo error, como importo el Provider 😕

Actualizando a la última versión de React Router

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React