> ## Documentation Index
> Fetch the complete documentation index at: /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:

> [tab] npm
>
> ```bash theme={null}
> npm install fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] Bun
>
> ```bash theme={null}
> bun add fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm add fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn add 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.

> [card] [Labels and locales](/docs/cli/locales.md)
>
> Configure supported locales and keep the application's URL policy.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.