Tutorial React: Rutas anidadas y rutas dinámicas

Definición y uso de rutas anidadas

Las rutas anidadas en React Router permiten definir rutas dentro de otras rutas, lo que facilita la estructura jerárquica de las aplicaciones. Este enfoque es útil para aplicaciones que tienen una navegación compleja con múltiples niveles de profundidad.

Para definir rutas anidadas, se utiliza el componente <Routes> y el componente <Route>. El componente <Route> puede contener otros componentes <Route> como hijos, lo que indica que esas rutas son accesibles solo cuando la ruta padre está activa.

Ejemplo básico de rutas anidadas:

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

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta raíz ("/") utiliza el componente Layout. Dentro de Layout, se definen varias rutas anidadas: Home, About y Dashboard. La ruta Dashboard a su vez tiene una ruta hija Settings.

Para que las rutas anidadas funcionen correctamente, es necesario renderizar el elemento hijo en el componente padre utilizando el componente <Outlet> del paquete react-router-dom. El componente <Outlet> actúa como un marcador de posición para los componentes hijos.

Ejemplo de uso de <Outlet> en el componente Dashboard:

// Dashboard.jsx
import { Outlet } from 'react-router-dom';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

En este ejemplo, cuando se navega a la ruta /dashboard, se renderiza el componente Dashboard y, si se navega a /dashboard/settings, el componente Settings se renderiza dentro del Outlet del Dashboard.

Para navegar entre estas rutas, se pueden utilizar los componentes <Link> o <NavLink> de react-router-dom:

// Layout.jsx
import { Link, Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}

En este ejemplo, el componente Layout proporciona una navegación básica entre las rutas Home, About y Dashboard. El componente Outlet en Layout asegura que los componentes hijos se rendericen en el lugar adecuado.

Uso de Outlet

El componente <Outlet> es fundamental en React Router para renderizar rutas anidadas. Actúa como un marcador de posición donde los componentes de las rutas hijas se renderizan. Esto permite que una ruta padre contenga rutas hijas que se renderizan en el contexto del componente padre.

Para utilizar <Outlet>, primero asegúrate de que las rutas hijas estén definidas dentro de una ruta padre en el componente <Routes>. Luego, coloca <Outlet> en el componente padre donde deseas que se rendericen las rutas hijas.

Ejemplo de configuración de rutas con <Outlet>:

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

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route path="settings" element={<Settings />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta "/dashboard" tiene una ruta hija "/dashboard/settings". Para que la ruta hija se renderice correctamente, el componente Dashboard debe usar <Outlet>:

// Dashboard.jsx
import { Link, Outlet } from "react-router-dom";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard Page</h1>
      <Link to="settings">Settings</Link>
      <Outlet />
    </div>
  );
}

Cuando se navega a /dashboard, se renderiza el componente Dashboard. Si se navega a /dashboard/settings, el componente Settings se renderiza en el lugar donde está el <Outlet> en Dashboard.

Otro ejemplo práctico es usar <Outlet> en un componente de diseño general:

// Layout.jsx
import { Link, Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}

En este caso, Layout proporciona una barra de navegación y un <Outlet> para renderizar las rutas hijas correspondientes.

El uso de <Outlet> no se limita a un solo nivel de anidación. Puedes tener múltiples niveles de rutas anidadas, cada uno con su propio <Outlet>:

// NestedDashboard.jsx
import { Outlet } from 'react-router-dom';

export default function NestedDashboard() {
  return (
    <div>
      <h2>Nested Dashboard</h2>
      <Outlet />
    </div>
  );
}

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Dashboard from './pages/Dashboard/Dashboard';
import NestedDashboard from './pages/NestedDashboard/NestedDashboard';
import Settings from './pages/Settings/Settings';
import Profile from './pages/Profile/Profile';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />}>
            <Route path="nested" element={<NestedDashboard />}>
              <Route path="settings" element={<Settings />} />
              <Route path="profile" element={<Profile />} />
            </Route>
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta "/dashboard/nested" tiene sus propias rutas hijas "/dashboard/nested/settings" y "/dashboard/nested/profile", que se renderizan dentro del <Outlet> de NestedDashboard.

Definición y uso de rutas dinámicas

Las rutas dinámicas en React Router permiten definir rutas que incluyen parámetros variables, lo que permite crear rutas más flexibles y dinámicas. Para definir una ruta dinámica, se utiliza el símbolo de dos puntos : seguido del nombre del parámetro en la ruta.

Ejemplo de definición de una ruta dinámica:

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

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

En este ejemplo, la ruta "/user/:userId" define un parámetro dinámico userId que puede tomar cualquier valor. Cuando se navega a una URL como /user/123, el valor 123 se asigna al parámetro userId.

Para acceder al valor de un parámetro dinámico dentro de un componente, se utiliza el hook useParams de react-router-dom:

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

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

  return (
    <div>
      <h1>Perfil del usuario {userId}</h1>
    </div>
  );
}

En este ejemplo, el hook useParams devuelve un objeto con los parámetros de la ruta. El componente UserProfile obtiene el valor de userId y lo utiliza para renderizar información específica del usuario.

Es posible definir múltiples parámetros dinámicos en una sola ruta:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import BlogPost from './pages/BlogPost/BlogPost';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="blog/:year/:month/:slug" element={<BlogPost />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, la ruta "/blog/:year/:month/:slug" define tres parámetros dinámicos: year, month, y slug. Estos parámetros pueden ser utilizados dentro del componente BlogPost:

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

export default function BlogPost() {
  const { year, month, slug } = useParams();

  return (
    <div>
      <h1>Post del blog - {year}/{month}</h1>
      <p>Slug: {slug}</p>
    </div>
  );
}

El hook useParams facilita la obtención de los valores de los parámetros dinámicos, permitiendo que los componentes sean más reutilizables y flexibles.

Para navegar a una ruta dinámica, se pueden utilizar los componentes <Link> o <NavLink> de react-router-dom con interpolación de strings:

// Layout.jsx
import { Link, Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user/123">Perfil del usuario 123</Link></li>
          <li><Link to="/blog/2024/04/introduccion-a-react">Post de blog</Link></li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}

En este ejemplo, los enlaces navegan a rutas dinámicas con valores específicos para los parámetros. Esto permite una navegación más rica y específica en la aplicación.