15. Primeros pasos con React Router
Para construir una web app de verdad hace falta tener varias páginas para cada cosa bien separada. Este es el viejo pensamiento de un viejo desarrollador.
Los tiempos han cambiado y eso de "cada cosa en su ruta" está muy alineado con el SEO, pero poco con los tiempos de desarrollo de aplicaciones en cliente en las que vivimos. Todo se parece más a una app móvil donde los elementos se van visualizando en pantalla a medida que el usuario elige lo que quiere hacer. Google ya vendrá después a indexarnos.
El estándar de facto para montar enrutados en la aplicación con React es React Router.
Muy bien documentado permite que estés haciendo tu tarea en pocos minutos. He decidido, una vez más, extraer esta tarea a un entorno aislado en CodeSandbox para no interferir con la aplicación.
Las cosas que he descubierto son:
- Las rutas se definen dentro de la app, en el componente padre de mayor rango. Es como un
Switchde los de toda la vida, pero en moderno. - Si colocas un enlace
<a>a una ruta de las generadas todo funcionará excepto algo que tiene "poquita importancia" en todas las aplicaciones de cliente: el estado de los datos. Desaparecerá si lo haces de esta forma incorrecta. Así que el componenteLinkoNavLinksi quieres colocar enlace será tu amigo. - Acepa el paso de parámetros por URL sin muchos problemas, como puedes ver en el ejemplo de más abajo.
- Incluye un caso, como si fuera un
Switchde verdad para que puedas tener cubierta la "página no encontrada". Será un componente más de tu aplicación.
Nota: Ahora, como te decía, no me preocupa el SEO. Pero he vivido en proyectos donde renderizar las páginas pensando en Google utilizando tecnologías como Angular o React fue un calvario. Lo tengo en mente.
Pudes ver y jugar el ejemplo en este CodeSandbox:
