Frontend Development●●Intermedio

Rutas Dinámicas, Protegidas y 404

120 min

0 vistas

01 enero 2026

Parametros, rutas anidadas, protección y redirecciones.

Rutas dinámicas y parámetros

useParams permite leer identificadores desde la URL.
Ideal para perfiles, productos o detalle de posts.
Se pueden usar múltiples parámetros: /categorias/:slug/productos/:id.
Conviene validar y transformar tipos (por ejemplo, Number(id)) antes de usar el valor.
Si el id no existe, mostrar un estado "no encontrado" o redirigir.

Rutas anidadas y layouts

Permiten compartir un layout común con Outlet (sidebar, header, tabs).
Route con index define la pantalla por defecto del layout.
Las rutas hijas usan paths relativos, evitando duplicar prefijos.
Útil para secciones como /dashboard, /cuenta, /admin.

Navegación programática

useNavigate redirige después de acciones (login, submit, logout).
replace: true evita que el usuario vuelva a la pantalla anterior con back.

Query params

useSearchParams administra filtros, orden y paginación.
Mantiene el estado en la URL.
Se recomienda definir valores por defecto para evitar null.
Útil para sincronizar UI (filtros) con la URL y compartir resultados.

Rutas protegidas y 404

Navigate redirige según autenticación.
Se puede guardar la ruta previa en state para volver después del login.
Ruta * captura páginas inexistentes.
En rutas anidadas, un * interno permite 404 por sección.
Mostrar un CTA para volver al home o a la sección principal.

Ejemplos de Código

3 ejemplos

Parametros en URL

javascript

1import { Routes, Route, useParams } from "react-router-dom";
2
3function UserProfile() {
4  const { id } = useParams();
5  return <div>Perfil: {id}</div>;
6}
7
8function App() {
9  return (
10    <Routes>
11      <Route path="/users/:id" element={<UserProfile />} />
12    </Routes>
13  );
14}

Protección por auth

javascript

1import { Navigate } from "react-router-dom";
2
3function ProtectedRoute({ children }) {
4  const isAuth = Boolean(localStorage.getItem("token"));
5  return isAuth ? children : <Navigate to="/login" replace />;
6}

Ruta catch-all

javascript

1import { Routes, Route } from "react-router-dom";
2import NotFound from "./pages/NotFound";
3
4function App() {
5  return (
6    <Routes>
7      <Route path="/" element={<Home />} />
8      <Route path="*" element={<NotFound />} />
9    </Routes>
10  );
11}

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaIntermedio1 min

Práctica guiada - Detalle de producto

Práctica

Lista de productos con ruta dinámica y detalle por id.

Desafío de Código

EjercicioIntermedio15 min

Ejercicios - Auth y filtros

Ejercicios

(1) Login con redirección, (2) filtro por query params, (3) pantalla 404.

Documentación Oficial

DocumentaciónIntermedio15 min

useSearchParams

Guía para manejar query params en React Router.

useSearchParams