Cómo implementar enrutamiento basado en configuración regional en React Router v7

Problema

Al crear 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 en idiomas específicos, 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 capacidad de descubrimiento.

Solución

Coloca un identificador de idioma directamente en la ruta de la 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 los usuarios como para los motores de búsqueda. Al definir rutas con un parámetro de configuración regional como primer segmento, la aplicación puede extraer la configuración regional de la URL y usarla para determinar qué contenido de idioma mostrar. Este enfoque garantiza que cada URL identifique de manera inequívoca tanto la página como su idioma.

Pasos

1. Define rutas con un parámetro de configuración regional

Configura tus rutas en app/routes.ts para incluir un parámetro de configuración regional 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 configuración regional.

2. Crea un componente de diseño para extraer la configuración regional

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 configuración regional 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 layout utiliza este locale para construir enlaces de navegación y pasa el control de renderizado a las rutas hijas mediante Outlet.

3. Accede al locale en los componentes de página

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

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 layout localizado puede extraer el locale de 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 locale.

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

Reemplaza las etiquetas anchor 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 gestiona el enrutamiento en el 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 locale para mantener el contexto de idioma a través de la navegación.