Rutas Protegidas y Redirecciones en React con Autenticación

Crear y proteger vistas en React con TypeScript es clave para controlar el acceso según el estado de autenticación. Aquí se implementa un componente envolvedor ProtectedRoute como wrapper, se usa Navigate de React Router DOM para la redirección y se añade una ruta comodín para un componente NotFound. Todo con un enfoque práctico: componente Profile, props tipadas con TypeScript y renderizado condicional con children y ReactNode.

¿Qué construimos y por qué con rutas protegidas en React?

Se configura una ruta para un componente Profile y se protege con un componente ProtectedRoute que decide si mostrar el contenido o redirigir al home. Además, se integra una ruta comodín con path "*" para manejar rutas desconocidas con un componente NotFound.

• Componente de perfil protegido por autenticación booleana.
• Redirección con Navigate cuando no hay acceso.
• Uso de children para renderizar el componente hijo.
• Tipado con interfaz de TypeScript y ReactNode.
• Ruta comodín "*" para mostrar NotFound y evitar pantallas en blanco.

¿Cómo crear y proteger la ruta de profile con TypeScript y React Router DOM?

El flujo parte de crear el componente Profile, añadir la ruta y envolver su renderizado con ProtectedRoute. La protección depende de una prop booleana, por ejemplo, authenticated.

¿Cómo se define el wrapper ProtectedRoute con interfaz tipada?

Se modela la prop de autenticación y se usa un condicional para decidir entre renderizar el hijo o redirigir al home.

// ProtectedRoute.tsx
import { Navigate } from 'react-router-dom';
import { ReactNode } from 'react';

interface ProtectedRouteProps {
  authenticated: boolean;
  children: ReactNode;
}

export function ProtectedRoute({ authenticated, children }: ProtectedRouteProps) {
  if (!authenticated) {
    return <Navigate to="/" />;
  }
  return <>{children}</>;
}

Puntos clave: - authenticated controla el acceso con true o false. - Si no hay autenticación, se retorna Navigate a la raíz. - Si hay autenticación, se renderizan los children.

¿Cómo se crea el componente de profile?

Se genera un componente simple reutilizando la estructura de otra vista; se actualiza el contenido para el perfil.

// Profile.tsx
export function Profile() {
  return (
    <section>
      <h2>Profile</h2>
      <p>This is the profile page of our application.</p>
    </section>
  );
}

¿Cómo se integra la ruta protegida en App con React Router DOM?

Se define la ruta de profile y se envuelve el elemento con ProtectedRoute.

// App.tsx (fragmento)
import { Routes, Route } from 'react-router-dom';
import { Profile } from './Profile';
import { ProtectedRoute } from './ProtectedRoute';

export default function App() {
  const isAuthenticated = false; // cambia a true para permitir el acceso

  return (
    <Routes>
      {/* ...otras rutas */}
      <Route
        path="/profile"
        element={
          <ProtectedRoute authenticated={isAuthenticated}>
            <Profile />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

Comportamiento esperado: - Si authenticated es false, se redirige a "/". - Si authenticated es true, se muestra Profile. - Puedes probar escribiendo "/profile" en el navegador o agregando un enlace en el menú.

¿Cómo manejar redirecciones y una página not found?

Además de la protección, es buena práctica manejar rutas inexistentes para comunicar el error y evitar pantallas en blanco. Se utiliza un path "*" que captura cualquier ruta no mapeada.

// NotFound.tsx
export function NotFound() {
  return (
    <section>
      <h2>Not found</h2>
      <p>La página que buscas no existe.</p>
    </section>
  );
}

// App.tsx (fragmento)
import { NotFound } from './NotFound';

export default function App() {
  // ...
  return (
    <Routes>
      {/* rutas conocidas */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

Sugerencias prácticas: - Añade un enlace en el navbar: Profile. - Cambia rápidamente el estado authenticated para validar la protección. - Usa mensajes claros en NotFound para mejorar la UX.

¿Qué componente protegerías en tu proyecto y por qué? Comparte tu enfoque en los comentarios y cuéntanos cómo lo implementarías con React Router DOM y TypeScript.