React Router i18n · Framework Mode
Palamedes connects React Router 8 loaders, actions, SSR, and hydrated React components to one translation runtime. The Vite plugin compiles messages; route modules resolve the locale and activate the matching catalog.
Type-safe route modules, loaders, actions, and SSR.
React 19 and the React Router Vite plugin.
Macro transforms and PO loading in the route build.
Cookie, route, subdomain, and top-level domain.
@palamedes/react-router-rscv1.17.3635 downloads / month01 — The framework problem
Framework Mode spans the initial server render and later browser navigations. A translated route must activate its locale before loader or action macros run, then hydrate React with the same catalog.
02 — The Palamedes model
React Router continues to own matching, redirects, data loading, and mutations. Palamedes supplies transformed authoring, catalogs, request activation, and client synchronization around those APIs.
The Palamedes transform runs beside the React Router plugin, so macros and PO imports become normal modules in the Framework Mode build.
A loader or action normalizes its locale and activates the server runtime before translated messages execute.
The root route exposes the resolved locale and the client entry loads the same catalog before React hydrates the document.
03 — In TypeScript
vite.config.ts + routes/locale-home.tsx
// vite.config.ts
import { reactRouter } from "@react-router/dev/vite"
import { palamedes } from "@palamedes/vite-plugin"
export default {
plugins: [
palamedes(),
reactRouter(),
],
}
// routes/locale-home.tsx
export async function loader({ params }: Route.LoaderArgs) {
const locale = normalizeLocale(params.locale)
activateServerI18n(locale)
return { locale, title: t`Welcome to Palamedes` }
}The checked route module also localizes an action response. Its client entry activates the locale from root loader data before HydratedRouter hydrates the React tree.
04 — Locale strategy
React Router route modules own params, requests, redirects, and links. Palamedes keeps the catalog and component model identical while the four examples change how those route modules derive a locale.
One URL for all locales. Best for apps behind login where SEO is irrelevant and switching should be instant.
/de/checkout-style paths. The SEO-friendly default for public content with indexable localized pages.
de.example.com. Clean separation per market, works well with regional CDNs and analytics splits.
example.de vs example.com. Maximum market trust; Palamedes maps each domain to its locale.
◌ local / CIsource →
05 — Proof and boundaries
The verifier checks the initial document, route or host behavior, client switching, and a localized action after hydration.
The examples use generated loader and action types.
Server-rendered messages match the resolved locale.
A post-hydration action returns localized output.
Hosted demos and checked source cover the matrix.
06 — Questions
The short version of the decisions that usually block an implementation.
07 — Keep exploring