Cuando una aplicación de React crece y necesita mostrar diferentes secciones, renderizar todo en una sola vista no es la solución. Aquí se aborda cómo organizar un proyecto con múltiples páginas, instalar y configurar React Router DOM, y separar componentes en rutas independientes para que cada sección viva en su propia URL.
¿Por qué separar componentes en páginas distintas?
Al tener dos componentes como login y recovery password en un mismo archivo, ambos se renderizan uno debajo del otro. Esto obliga al usuario a hacer scroll para ver la segunda sección, lo cual no es el comportamiento deseado [1:50]. Lo ideal es que cada sección tenga su propia ruta y se muestre de forma independiente.
Para lograrlo, el proyecto necesita una nueva clasificación: páginas. Esta organización permite trabajar con páginas, componentes, layouts y una estructura clara que facilite la migración de recursos existentes hacia un proyecto más escalable [0:08].
¿Cómo crear el componente de recovery password?
Antes de configurar las rutas, es necesario crear el segundo componente. En este caso, se trata de la vista de recuperación de contraseña [0:43].
¿Qué ajustes requiere el JSX migrado?
- Reemplazar todos los atributos
class por className usando el atajo Ctrl+D para selección múltiple [1:00].
- Verificar que elementos como
<img> e <input> tengan su cierre correcto en JSX.
- Mantener la semántica y eliminar espacios innecesarios.
¿Cómo se manejan los estilos con SASS?
Se crea un archivo RecoveryPassword.scss dentro de la carpeta de styles. Un detalle importante: como las variables y el valor de body ya están asignados globalmente, no se deben duplicar [1:30]. Solo se importan las variables con @import para que el preprocesador las encuentre durante la compilación.
¿Cómo instalar y configurar React Router DOM?
Para separar las secciones en rutas independientes se instala react-router-dom con el comando:
bash
npm install react-router-dom
Este paquete permite definir diferentes páginas y navegar entre ellas según la URL que el usuario solicite [2:30].
¿Cómo reorganizar la estructura del proyecto?
El archivo App.jsx no es un componente ni un layout ni un container. Es el archivo raíz de rutas de la aplicación. Por eso se crea una carpeta llamada routes y se mueve App.jsx dentro de ella [3:05]. Esta organización deja claro que ahí viven las configuraciones de navegación.
¿Qué elementos importar de React Router DOM?
Desde la parte superior del archivo se importan tres recursos fundamentales [3:30]:
jsx
import { BrowserRouter, Switch, Route } from 'react-router-dom';
- BrowserRouter: encapsula toda la aplicación y gestiona la navegación hacia adelante y hacia atrás.
- Switch: funciona como una estructura de control que evalúa las rutas disponibles y muestra solo la que coincide.
- Route: define cada ruta individual con su path y el componente que debe renderizar.
¿Cómo se estructura el archivo de rutas?
La configuración sigue una jerarquía de tres niveles: BrowserRouter envuelve a Switch, y dentro de Switch se definen las rutas con Route [4:15].
jsx
<BrowserRouter>
<Layout>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/recovery-password" component={RecoveryPassword} />
<Route component={NotFound} />
</Switch>
</Layout>
</BrowserRouter>
Cada Route recibe la propiedad exact para que busque coincidencias exactas con el path indicado. El layout se mantiene como contenedor visual de los componentes [4:50].
La última ruta, sin exact ni path, actúa como el caso por defecto dentro del Switch. Cuando ninguna ruta coincide, se renderiza el componente NotFound, que representa la clásica página 404 [5:30].
Con esta configuración, cada sección de la aplicación vive en su propia URL. El componente de login se encuentra en /login, la recuperación de contraseña en /recovery-password y la página principal en la raíz /. ¿Cómo organizas tú las rutas en tus proyectos de React? Comparte tu experiencia.
