Configurar rutas en React con React Router Dom te permite enlazar cada URL con una página específica de tu aplicación. Aprenderás a instalar la librería, usar el hook useRoutes y envolver todo con BrowserRouter para que el enrutamiento funcione correctamente en proyectos frontend.

¿Cómo se instala React Router Dom en un proyecto React?

La instalación es directa desde la terminal y solo necesitas un comando para sumarlo a tus dependencias.

Abre tu terminal en la raíz del proyecto y ejecuta:

bash npm install react-router-dom

Una vez termine la instalación, ya puedes importar los hooks y componentes que necesitas dentro de App.jsx. Un buen hábito es ordenar los imports en este orden:

• Primero todo lo relacionado con React y librerías externas.
• Luego páginas y componentes propios.
• Por último archivos de estilos CSS.

Mantener esa consistencia hace que tu código sea mucho más fácil de leer cuando el proyecto crece.

¿Qué es React Router Dom? Es la librería oficial para manejar rutas en aplicaciones React. Te permite mostrar diferentes componentes según la URL del navegador sin recargar la página.

¿Cómo usar el hook useRoutes para definir rutas?

El hook useRoutes recibe un array de objetos donde cada objeto representa una ruta de tu aplicación.

Dentro de App.jsx importas el hook desde react-router-dom y creas una variable que guarde la configuración:

jsx import { useRoutes } from 'react-router-dom'

const AppRoutes = () => { let routes = useRoutes([ { path: '/', element: <Home /> }, { path: '/my-account', element: <MyAccount /> }, { path: '/my-orders', element: <MyOrders /> }, { path: '/my-order', element: <MyOrder /> }, { path: '/*', element: <NotFound /> }, { path: '/sign-in', element: <SignIn /> }, ]) return routes }

Cada objeto tiene dos propiedades clave: path, que define la URL, y element, que indica qué componente renderizar cuando esa ruta coincida.

¿Por qué separar AppRoutes en su propia función?

Separar la lógica de rutas en una función propia te ayuda a mantener App limpio y enfocado en la estructura general.

La función AppRoutes se encarga únicamente de retornar las rutas, mientras que App se ocupa de envolver todo con los providers y componentes globales que necesites más adelante, como un navbar o un context.

¿Cómo manejar rutas no encontradas con el asterisco?

El path '/*' funciona como comodín y captura cualquier URL que no coincida con las rutas definidas previamente.

En la práctica significa que si alguien escribe una dirección que no existe en tu app, automáticamente verá tu página NotFound. Es una solución elegante para manejar errores 404 sin escribir lógica adicional.

¿Para qué sirve BrowserRouter en React Router Dom?

BrowserRouter es el componente que habilita el enrutamiento en toda tu aplicación, y sin él los hooks de rutas no funcionan.

Debes envolver tu componente AppRoutes dentro de BrowserRouter en el App principal:

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

const App = () => { return ( <BrowserRouter> <AppRoutes /> </BrowserRouter> ) }

export default App

Después de guardar, levantas el servidor con npm run dev y al visitar localhost verás la página Home. Si escribes /my-orders en la URL, te llevará al componente correspondiente, y si escribes cualquier ruta inexistente, aparecerá NotFound.

¿Qué diferencia hay entre useRoutes y BrowserRouter? useRoutes define qué componente mostrar según la URL. BrowserRouter activa el sistema de enrutamiento del navegador. Necesitas ambos para que funcione.

Habilidades y conceptos que aprendes en la clase

Antes de avanzar al siguiente paso, vale la pena identificar los aprendizajes técnicos que te llevas.

• Instalación de dependencias con npm [0:15]: aprendes a sumar librerías externas con npm install react-router-dom.
• Hook useRoutes [0:48]: configuras un array de objetos con path y element para definir rutas declarativamente.
• Componente BrowserRouter [4:10]: envuelves tu app para activar el enrutamiento basado en la URL del navegador.
• Ruta comodín con asterisco [5:50]: usas '/*' para capturar cualquier URL no definida y mostrar una página NotFound.
• Separación de responsabilidades [2:30]: divides AppRoutes y App en funciones distintas para mantener el código modular.
• Orden de imports consistente [0:38]: organizas primero React, luego páginas y componentes, y al final estilos CSS.

En la siguiente clase darás el paso lógico: construir un componente navbar que conecte cada enlace con su ruta, para no tener que escribir las URLs manualmente. Cuéntame en los comentarios cómo te fue con la instalación y si lograste enlazar todas tus páginas sin problemas.