> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fimo.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Router

> Connect Fimo to a React Router framework-mode application.

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:

```bash theme={null}
npm install fimo fimo-react fimo-vite fimo-react-router
```

## Configure the runtime

Set the production profile:

```json theme={null}
{
  "runtime": { "framework": "react-router" }
}
```

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

```ts theme={null}
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`:

```tsx theme={null}
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`:

```ts theme={null}
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:

```tsx theme={null}
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.

<Card title="Labels and locales" icon="globe" href="/docs/cli/locales">
  Configure supported locales and keep the application's URL policy.
</Card>