Sistema que define qué función responde a cada URL.
El routing (enrutamiento) es el sistema que mapea URLs a funciones, componentes o controladores específicos. Define qué código se ejecuta según la ruta solicitada. En frontend (SPA): React Router, Vue Router, Next.js En backend: Express, Fastify, NestJS Conceptos clave: - Rutas estáticas: /about, /contact - Rutas dinámicas: /users/:id, /posts/[slug] - Nested routes: /dashboard/settings/profile - Route guards: Protección de rutas (auth)
// React Router v6 import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom'; function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Routes> {/* Ruta estática */} <Route path="/" element={<Home />} /> {/* Ruta dinámica */} <Route path="/users/:id" element={<UserProfile />} /> {/* Rutas anidadas */} <Route path="/dashboard" element={<DashboardLayout />}> <Route index element={<DashboardHome />} /> <Route path="settings" element={<Settings />} /> </Route> {/* Ruta protegida */} <Route path="/admin" element={ <ProtectedRoute> <AdminPanel /> </ProtectedRoute> } /> {/* 404 */} <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> ); } // Acceder a parámetros de ruta function UserProfile() { const { id } = useParams(); return <div>Usuario: {id}</div>; } // Express.js routing app.get('/api/users/:id', getUser); app.post('/api/users', createUser); app.use('/api/posts', postsRouter);
