---
title: React Router Framework Mode
description: 在 React Router Framework Mode 中接入 Sudomimus Connect 登录。
editUrl: true
head: []
template: doc
sidebar:
  order: 3
  hidden: false
  attrs: {}
pagefind: true
draft: false
---

`@sudomimus/react-router` 把 Connect 登录映射到服务端 action 和 loader。

```ts
// app/sudomimus.server.ts
import { createReactRouterHandlers } from "@sudomimus/react-router";

export const sudomimus = createReactRouterHandlers(options);
```

```ts
// app/routes/login.tsx
export const action = sudomimus.startAction;

// app/routes/auth.callback.tsx
export const loader = sudomimus.callbackLoader;

// app/routes/logout.tsx
export const action = sudomimus.logoutAction;
```

只在服务端 loader 和 action 中使用 `sudomimus.current({ request })`。配置共享、持久的 `WebAuthStore`，为 POST action 保持 CSRF 防护，并通过 CALLBACK ReturnRule 允许 callback URL。

[查看包源码](https://github.com/sudomimus/sudomimus/tree/master/sdks/typescript/packages/react-router)