Tutorial React: Definición y manejo de rutas

Explicación de <Routes> y <Route>

En React Router, la gestión de rutas se realiza principalmente a través de los componentes <Routes> y <Route>. Estos componentes permiten definir y gestionar la navegación dentro de una aplicación de React de manera declarativa.

El componente <Routes> se utiliza para envolver a múltiples <Route>. Este contenedor asegura que solo una ruta se renderice a la vez. Por otro lado, el componente <Route> define una ruta específica y el componente que debe renderizarse cuando la URL coincide con el patrón especificado.

Uso básico de <Routes> y <Route>

Se configura el enrutador:

// App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

En este ejemplo:

• <Router> es el contenedor principal que envuelve a toda la aplicación y habilita la funcionalidad de enrutamiento.
• <Routes> envuelve todos los <Route> y asegura que solo una ruta coincidente se renderice.
• <Route> define una ruta específica y el componente que debe renderizarse cuando la URL coincide con el patrón path.

Atributos del componente <Route>

El componente <Route> acepta varios atributos importantes:

• path: Especifica la URL que debe coincidir para que esta ruta se renderice.
• element: Especifica el componente que debe renderizarse cuando la ruta coincide.
• index: Define una ruta indexada, que se renderiza cuando no se especifica ninguna ruta secundaria.

Ejemplo de rutas indexadas y anidadas:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import Dashboard from './pages/Dashboard/Dashboard';
import Overview from './pages/Overview/Overview';
import Details from './pages/Details/Details';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route index element={<Overview />} />
          <Route path="details" element={<Details />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, Dashboard actúa como una ruta principal que puede tener rutas secundarias. Cuando la URL es /dashboard, el componente Overview se renderiza por defecto. Si la URL es /dashboard/details, entonces se renderiza el componente Details.

Manejo de parámetros dinámicos en rutas y useParams

React Router facilita la gestión de rutas con parámetros dinámicos a través del componente <Route> y el hook useParams. Los parámetros dinámicos permiten crear rutas que pueden recibir valores variables en sus URLs, lo que es útil para mostrar contenido específico basado en el valor del parámetro.

Para definir una ruta con parámetros dinámicos, se utiliza la sintaxis :param en el atributo path del componente <Route>. Por ejemplo, si queremos crear una ruta que muestre el perfil de un usuario basado en su ID, podríamos definirla así:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserProfile from './components/UserProfile/UserProfile';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta /user/:userId coincide con cualquier URL que siga el patrón /user/ seguido de algún valor (por ejemplo, /user/123). El componente UserProfile puede acceder al valor del parámetro userId utilizando el hook useParams.

El hook useParams se utiliza dentro de un componente funcional para acceder a los parámetros de la ruta. Aquí hay un ejemplo de cómo se puede usar useParams en el componente UserProfile para obtener y utilizar el userId:

// UserProfile.jsx
import { useParams } from 'react-router-dom';

export default function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>Perfil de usuario</h1>
      <p>ID del usuario: {userId}</p>
    </div>
  );
}

En este fragmento de código, el hook useParams devuelve un objeto con los parámetros de la ruta. Desestructuramos este objeto para obtener el valor de userId y lo usamos dentro del componente.

Es importante tener en cuenta que los parámetros dinámicos pueden ser utilizados de manera anidada y en rutas secundarias. Por ejemplo, si tuviéramos un componente Dashboard que incluya rutas secundarias con parámetros dinámicos, podríamos definirlo así:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserProfile from './components/UserProfile/UserProfile';
import Dashboard from './pages/Dashboard/Dashboard';
import Settings from './pages/Settings/Settings';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="user/:userId" element={<UserProfile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta /dashboard/user/:userId permite acceder al componente UserProfile dentro del contexto del Dashboard, utilizando el parámetro dinámico userId.

El uso de parámetros dinámicos en rutas proporciona una forma flexible y potente de construir aplicaciones React que pueden responder a diferentes URLs y proporcionar contenido específico basado en esos parámetros.

Rutas no coincidentes y <Navigate>

Es común encontrarse con escenarios en los que la URL del navegador no coincide con ninguna de las rutas definidas. Para manejar estas situaciones, se puede utilizar el componente <Navigate>, que permite redirigir al usuario a una ruta específica cuando no se encuentra una coincidencia.

El componente <Navigate> se utiliza para redirigir programáticamente a los usuarios a una ruta diferente. Esto es útil para manejar rutas no coincidentes, redirecciones después de acciones específicas (como el envío de un formulario), o para proteger rutas que requieren autenticación.

Uso de <Navigate> para redirección de rutas no coincidentes

Para redirigir a los usuarios cuando la URL no coincide con ninguna ruta definida, se puede utilizar un Route con el atributo path="*" junto con el componente <Navigate>. Este enfoque asegura que cualquier URL no coincidente redirija a una ruta específica, como una página de inicio o una página de error personalizada.

// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Contact from './pages/Contact/Contact';
import NotFound from './pages/NotFound/NotFound';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/not-found" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/not-found" />} />
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo:

• La ruta path="*" se utiliza para capturar cualquier URL que no coincida con las rutas definidas.
• El componente <Navigate> redirige a la ruta /not-found, donde renderizar un componente NotFound para informar al usuario que la página no fue encontrada.

Redirección condicional con <Navigate>

El componente <Navigate> también puede ser utilizado para redirecciones condicionales. Por ejemplo, si se desea redirigir a los usuarios a una página de inicio de sesión si no están autenticados, se puede hacer de la siguiente manera:

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

export default function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return children;
}

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import Login from './pages/Login/Login';
import Dashboard from './pages/Dashboard/Dashboard';
import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute';

export default function App() {
  const isAuthenticated = false; // Esta variable debería determinarse dinámicamente

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={
          <ProtectedRoute isAuthenticated={isAuthenticated}>
            <Dashboard />
          </ProtectedRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo:

• ProtectedRoute es un componente que verifica si el usuario está autenticado (isAuthenticated).
• Si el usuario no está autenticado, <Navigate> redirige a la página de inicio de sesión (/login).
• Si el usuario está autenticado, se renderiza el componente hijo (Dashboard).

Manejo de redirecciones con estado

El componente <Navigate> también permite pasar estado a la ruta de destino, lo que puede ser útil para mostrar mensajes o mantener información sobre la navegación previa. Este estado se puede acceder en el componente de destino a través del hook useLocation.

// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home/Home';
import Login from './pages/Login/Login';
import Dashboard from './pages/Dashboard/Dashboard';

export default function App() {
  const isAuthenticated = false; // Esta variable debería determinarse dinámicamente

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={
          !isAuthenticated ? (
            <Navigate to="/login" state={{ from: '/dashboard' }} />
          ) : (
            <Dashboard />
          )
        } />
      </Routes>
    </BrowserRouter>
  );
}

// Login.jsx
import { useLocation } from "react-router-dom";

export default function Login() {
  const location = useLocation();
  const from = location.state?.from || '/';

  return (
    <div>
      <h1>Inicio de sesión</h1>
      <p>Redirigido desde: {from}</p>
    </div>
  );
}

En este ejemplo:

• Se pasa un estado { from: '/dashboard' } al redirigir a la página de inicio de sesión.
• El componente Login accede a este estado utilizando el hook useLocation y muestra la URL desde la cual se redirigió al usuario.

El uso del componente <Navigate> proporciona una manera flexible y declarativa de manejar redirecciones en aplicaciones React, asegurando una navegación fluida y controlada en diversas situaciones.