React Router

React Router framework mode is the setup created by fimo init. The application owns its route modules and rendering choices; Fimo connects content, labels, Studio navigation, and hosting. Install the runtime packages together. Keep all four on the same Fimo release:

npm install fimo fimo-react fimo-vite fimo-react-router

Configure the runtime

Set the production profile:

{
  "runtime": { "framework": "react-router" }
}

The supported client-rendered setup uses React Router’s native build with Fimo’s provider-neutral hosting preset:

import type { Config } from '@react-router/dev/config';
import { fimoPreset } from 'fimo-react-router/preset';

export default {
  ssr: false,
  presets: [fimoPreset()],
} satisfies Config;

Fimo does not currently provide a React Router SSR adapter. Do not change an existing SSR project to ssr: false merely to add Fimo.

Connect the application

Use FimoProviders from fimo-react-router around the existing application. It supplies labels, editing context, and a React Query fallback. Keep an application-owned React Query provider above it when the project already has one. FimoProviders also owns the optional Studio preview runtime. Application code does not read Fimo preview environment variables or inject a preview script. FimoScripts in the document shell remains responsible only for JSON-LD and the development error overlay. Application code renders tracked values with components from fimo-react:

import { Image, RichText, Text, useLabels } from 'fimo-react';

const { t } = useLabels();

return (
  <article>
    <Text value={t('article.heading')} as="h1" />
    <Image value={article.cover} />
    <RichText value={article.body} />
  </article>
);

The public runtime accepts React 18.2 and React 19. Install only the optional third-party peers used by the application: React, React DOM, React Router, Vite, and React Query.

Routes, locales, and SEO

A route that owns its locale segment registers it directly. React Router spells the omittable segment :locale?, which is the same segment .fimo/config.json spells :locale:

import { layout, route } from '@react-router/dev/routes';

export default [
  layout('./pages/LocaleLayout.tsx', [
    route(':locale?', './pages/Index.tsx'),
    route(':locale?/pricing', './pages/Pricing.tsx'),
    route(':locale?/blog/:slug', './pages/BlogPost.tsx'),
  ]),
];

Use a small application-owned boundary to hand the active locale to Fimo. Move the root FimoProviders wrapper into this boundary rather than nesting two providers:

import { FimoProviders } from 'fimo-react-router';
import { Outlet, useParams } from 'react-router';

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

  return (
    <FimoProviders locale={locale}>
      <Outlet />
    </FimoProviders>
  );
}

/pricing and /blog/hello use the configured default. /es/pricing and /es/blog/hola pass es. Keep the application responsible for validating supported locale parameters, redirects, links, document language, and SEO. <FimoLink> remains available when its locale-preserving behavior matches the application. Route meta exports remain responsible for SEO. The optional .fimo/config.json#routes catalog helps Studio navigate semantic pages. It does not replace src/routes.ts or generate production rewrites.

Labels and locales

Configure supported locales and keep the application’s URL policy.

Start

Build your site

Preview and launch

Agents and automation

Work with your team

Migrate an existing site

Reference

React Router

Configure the runtime

Connect the application

Routes, locales, and SEO

Labels and locales

​Configure the runtime

​Connect the application

​Routes, locales, and SEO

Labels and locales

Configure the runtime

Connect the application

Routes, locales, and SEO