Cómo configurar React Router en una SPA

Aprender a configurar React Router en una single-page application es el paso que convierte un proyecto de una sola pantalla en una aplicación con varias páginas navegables. Aquí verás cómo instalar la librería, crear tus primeras rutas y migrar tu contenido a componentes de página independientes, ideal para quien construye una SPA con React y TypeScript.

Por qué una SPA necesita React Router

Una single-page application funciona dentro de una misma página. El problema aparece cuando quieres ir a otra ruta, por ejemplo /search: la app vuelve a renderizar la misma pantalla porque solo tiene un punto de entrada, el homepage [00:37].

Aquí es donde entra React Router. Es la librería que escucha los cambios de la URL y renderiza la pantalla correcta según la ruta [00:10].

¿Qué es una single-page application? Es una aplicación que carga una sola página HTML y actualiza el contenido de forma dinámica sin recargar toda la pantalla. React Router se encarga de mostrar la vista correcta según la URL.

Cómo instalar React Router

Todo empieza en la terminal con el comando install react router [00:55]. Para confirmar qué versión quedó instalada, revisa el archivo package.json.

En la grabación del curso se usó la versión 7.15.1 [01:04]. Es muy probable que tú instales una versión distinta, así que asegúrate de que sea compatible con las funcionalidades que vas a usar.

Cómo crear el archivo router con createBrowserRouter

Una vez instalada la librería, sigue una serie de pasos ordenados. Dentro de tu carpeta source crea una carpeta nueva llamada router, y dentro de ella un archivo router con la extensión .tsx porque trabajamos con TypeScript [01:26].

Lo primero es importar createBrowserRouter desde React Router. Esta función te permite crear las rutas y empaquetarlas para tu aplicación [01:53].

¿Para qué sirve createBrowserRouter? Es la función de React Router que recibe un array de rutas y las agrupa para que tu app sepa qué componente mostrar en cada URL.

Al inicio solo tendrás una ruta: la del homepage, que apunta al archivo App.tsx [02:04]. Esa estructura pequeña sirve como base para ir agregando más páginas después.

Cómo agregar nuevas páginas a las rutas

Para sumar más vistas, crea una carpeta pages dentro de source, a la misma altura que router [02:20]. Ahí guardarás los archivos de cada página. En este caso son dos:

• La página de búsqueda, con un título "Resultados de búsqueda" y un paragraph que dice "Aquí aparecerán los alojamientos filtrados".
• La página de no encontrado, con el mensaje "Página no encontrada. La ruta que buscas no existe".

Estas estructuras sencillas te sirven para probar que las rutas responden correctamente. De vuelta en el router, agrega dentro del array la ruta search y un comodín que renderice el componente not found page cuando ninguna ruta haga match [02:57]. El editor te ayuda a hacer los imports de forma rápida.

Cómo activar las rutas con RouterProvider

Aquí viene lo interesante. Aunque ya tengas la ruta de search definida, la app sigue mostrando el mismo contenido del homepage. ¿Por qué? Porque el archivo Main sigue renderizando directamente App.tsx [03:38].

Mientras eso siga así, solo verás una pantalla. La solución es usar lo que entrega React Router:

1. Importa RouterProvider en la parte superior del archivo Main.
2. Importa el router, el archivo donde definiste todas las rutas.
3. Reemplaza el renderizado de App por RouterProvider con la prop router apuntando a tu configuración de rutas [04:12].

Después de guardar, al entrar a /search verás el contenido del SearchPage. Con el slash solo (/) se renderiza el homepage, y si escribes una ruta inexistente como hola, no encuentra match y aparece el comodín con "Página no encontrada" [04:38].

¿Qué hace el comodín en las rutas? Es una ruta que captura cualquier URL que no coincida con las rutas definidas y muestra una página de error, normalmente un not found.

Cómo migrar App.tsx a un componente de página

El último paso es un pequeño refactor. Hasta ese punto el homepage se renderiza desde App.tsx, pero conviene mover ese código a la carpeta pages para mantener todo consistente [05:16].

Copia el contenido de App.tsx dentro de un nuevo archivo Homepage en la carpeta pages. Luego, en el router, cambia la referencia para que use Homepage en lugar de App, importa el nuevo archivo y elimina el import de App.tsx [05:40].

Antes de borrar nada, una buena práctica es hacer una prueba visual: agrega un elemento temporal como un "Hola" en Homepage.tsx y verifica que aparezca en la UI. Si aparece, confirmas que estás renderizando el archivo correcto y ya puedes eliminar App.tsx sin miedo [06:24].

Con eso, tu aplicación muestra páginas distintas según la URL y queda lista para crecer. En la sección de recursos quedaron dos enlaces: la documentación oficial de React Router y la de Mozilla sobre single-page application.

¿Te animas al reto? Crea las páginas que faltan según el plan del inicio del curso y déjame en los comentarios tu resultado.