Modèles React Router

SDK : @clerk/react-router v3+. Nécessite React Router v7.9+.

De Quoi Avez-Vous Besoin ?

Modèle Mental

React Router v7 utilise un pipeline middleware + loader. Clerk s'intègre aux deux niveaux :

• Middleware (clerkMiddleware()) — s'exécute à chaque requête, attache l'auth au contexte
• rootAuthLoader — obligatoire dans root.tsx pour passer l'état Clerk au client
• getAuth(args) — appelé dans n'importe quel loader/action pour obtenir l'utilisateur actuel

Request → clerkMiddleware() → rootAuthLoader → page loader → component
                 ↓                   ↓               ↓
           attache l'auth     injecte l'état    getAuth(args)
           au contexte        à la réponse      lit le contexte

Configuration Minimale

1. root.tsx

import { rootAuthLoader } from '@clerk/react-router/server'
import { ClerkApp } from '@clerk/react-router'
import type { Route } from './+types/root'

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args)
}

export default ClerkApp(function App() {
  return <Outlet />
})

2. Middleware (root route ou entry.server.ts)

import { clerkMiddleware } from '@clerk/react-router/server'
export const middleware = [clerkMiddleware()]

Obligatoire : rootAuthLoader doit être appelé dans le loader de root.tsx. Sans cela, getAuth lève une erreur dans les loaders imbriqués.

Auth dans les Loaders

import { getAuth } from '@clerk/react-router/server'
import type { Route } from './+types/dashboard'

export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args)
  if (!userId) throw redirect('/sign-in')

  const data = await fetchUserData(userId)
  return { data }
}

Auth dans les Actions

import { getAuth } from '@clerk/react-router/server'

export async function action(args: Route.ActionArgs) {
  const { userId, orgId } = await getAuth(args)
  if (!userId) throw new Response('Unauthorized', { status: 401 })

  const formData = await args.request.formData()
  await saveData(userId, orgId, formData)
  return redirect('/dashboard')
}

Composants Client

import { useAuth, useUser } from '@clerk/react-router'

export function Profile() {
  const { userId, isSignedIn } = useAuth()
  const { user } = useUser()
  if (!isSignedIn) return null
  return <p>{user?.firstName}</p>
}

Changement d'Organisation

import { OrganizationSwitcher } from '@clerk/react-router'

export function Nav() {
  return <OrganizationSwitcher afterSelectOrganizationUrl="/dashboard" />
}

export async function loader(args: Route.LoaderArgs) {
  const { userId, orgId } = await getAuth(args)
  if (!userId) throw redirect('/sign-in')
  if (!orgId) throw redirect('/select-org')

  return { data: await fetchOrgData(orgId) }
}

Pièges Courants

Tableau des Imports

Voir Aussi

• clerk-setup - Installation initiale de Clerk
• clerk-custom-ui - Flux personnalisés et apparence
• clerk-orgs - Organisations B2B

Docs

React Router SDK