En este artículo aprenderás:

1. ¿Qué es createBrowserRouter?
2. ¿Qué es createRoutesFromElements?
3. Componente para Englobar Rutas Privadas
4. ¿Cómo Implementar un Router con Rutas Privadas?

¿Qué es createBrowserRouter()?

"Este es el enrutador recomendado para todos los proyectos web de React Router. Utiliza la API de historial DOM para actualizar la URL y administrar la pila de historial. También habilita las API de datos v6.4 como loaders, actions, fetchers y más." Fuente

¿Qué es createRoutesFromElements()?

" createRoutesFromElements es una función helper que crea objetos de ruta a partir de elementos <Route/>. Es útil si prefieres crear rutas como JSX en lugar de objetos." Fuente

Componente para Englobar Rutas Privadas

<Outlet/>

El componente <Outlet/> se utiliza en en <Route/>s para renderizar el contenido de la ruta hija (equivalente a que a un <Route/> se le pase la propiedad children).

Componente

Este componente va a ser el que envuelva a las rutas que queremos que sean privadas. Va a verificar si el usuario está logueado o no y va a redirigirlo a la ruta de login en caso de que no lo esté. En caso de que el usuario esté logueado, va a renderizar las rutas hijas (children).

import { Outlet, Navigate } from "react-router-dom";
import { getUser } from "./utils/auth"; // Este es el archivo hipotético que contiene la función getUser().

const ProtectedRoutes = () => {
  const usuario = getUser(); // La función getUser() devuelve el usuario si está logueado o null si no lo está.

  if (!usuario) {
    return <Navigate to="/login" />;
  }

  return <Outlet />;
};

export default ProtectedRoutes;

¿Cómo Implementar un Router con Rutas Privadas?

Para nuestro ejemplo queremos que la aplicación tenga las siguientes rutas:

1. /login (ruta pública)
2. /dashboard (ruta privada)
3. /settings (ruta privada)

El components <Route/> acepta una propiedad (entre otras) llamada element. Esta propiedad recibe el componente que va a ser renderizado cuando la ruta coincida con la URL actual.

// main.tsx
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import Login from './pages/Login' // Este es el componente que contiene el formulario de login.
import Dashboard from './pages/Dashboard' // Este es el componente que contiene el dashboard.
import Settings from './pages/Settings' // Este es el componente que contiene la página de configuración.
import ProtectedRoutes from './components/ProtectedRoutes' // Este es el componente que contiene las rutas privadas.

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<ProtectedRoutes />}>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </>
  )
);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <RouterProvider router={router} />
);