Cómo implementar enrutamiento basado en idioma en React Router v7

Problema

Al construir una aplicación multilingüe, una decisión fundamental da forma a todo lo demás: ¿cómo sabrá la aplicación qué idioma mostrar? Sin un mecanismo explícito, la URL /about se vuelve ambigua—podría representar contenido en cualquier idioma. Los usuarios no pueden compartir enlaces a versiones específicas de idioma, y los motores de búsqueda tienen dificultades para entender qué versión pertenece a qué audiencia. Esta ambigüedad crea problemas tanto para la experiencia del usuario como para la visibilidad.

Solución

Coloca un identificador de idioma directamente en la ruta URL, como /en/about o /fr/about. Esto hace que cada ruta sea única para un idioma específico, eliminando la ambigüedad tanto para usuarios como para motores de búsqueda. Al definir rutas con un parámetro de localización como primer segmento, la aplicación puede extraer la localización de la URL y usarla para determinar qué contenido de idioma mostrar. Este enfoque asegura que cada URL identifique sin ambigüedades tanto la página como su idioma.

Pasos

1. Definir rutas con un parámetro de localización

Configura tus rutas en app/routes.ts para incluir un parámetro de localización como primer segmento de cada ruta.

import { type RouteConfig, route, index } from "@react-router/dev/routes";

export default [
  route(":locale", "./localized-layout.tsx", [
    index("./home.tsx"),
    route("about", "./about.tsx"),
    route("contact", "./contact.tsx"),
  ]),
] satisfies RouteConfig;

El prefijo de dos puntos hace que locale sea un segmento dinámico que se analizará desde la URL y se proporcionará como parámetro a los componentes de ruta. Esta configuración crea rutas como /en, /en/about, /fr/contact, donde el primer segmento es siempre la localización.

2. Crear un componente de diseño para extraer la localización

Las rutas secundarias se renderizan a través del componente Outlet en la ruta principal. Crea un diseño que extraiga el parámetro de localización y renderice las rutas anidadas.

import { Outlet, useParams } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <a href={`/${locale}`}>Home</a>
        <a href={`/${locale}/about`}>About</a>
        <a href={`/${locale}/contact`}>Contact</a>
      </nav>
      <Outlet />
    </div>
  );
}

El hook useParams recupera el valor del segmento dinámico de la URL. El diseño utiliza esta localización para construir enlaces de navegación y pasa el control de renderizado a las rutas secundarias a través de Outlet.

3. Acceder al idioma en los componentes de página

Utiliza el hook useParams en cualquier componente de ruta para acceder al parámetro de idioma.

import { useParams } from "react-router";

export default function About() {
  const { locale } = useParams();

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

Cada componente renderizado dentro del diseño localizado puede extraer el idioma desde la URL. Este valor puede utilizarse para cargar las traducciones apropiadas, formatear fechas y números, o tomar cualquier otra decisión específica del idioma.

4. Usar componentes Link para la navegación del lado del cliente

Reemplaza las etiquetas de anclaje con componentes Link para habilitar la navegación con enrutamiento del lado del cliente.

import { Outlet, useParams, Link } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <Link to={`/${locale}`}>Home</Link>
        <Link to={`/${locale}/about`}>About</Link>
        <Link to={`/${locale}/contact`}>Contact</Link>
      </nav>
      <Outlet />
    </div>
  );
}

El componente Link maneja el enrutamiento del lado del cliente y evita que la página web se recargue, permitiendo una navegación fluida entre páginas. Cada enlace incluye el parámetro de idioma para mantener el contexto del idioma durante la navegación.