# React Router でアプリ内フィードバックフォームを作る > React Router 8 のフィードバックフォーム。リソースルートの action が Cookie セッションを読み、レイアウトの fetcher が送信し、JS なしの送信は元のページにリダイレクトします。 公開日 2026-10-25 · https://ikiform.com/ja/guides/feedback-form/react-router ログイン後のルートを包むレイアウトにフィードバックフォームを 1 つマウントし、`useFetcher` でリソースルートに送信します。その action は Cookie セッションからユーザーを読み、`Referer` からページを取り、シークレットキーを付けて評価をフォームバックエンドに転送します。JavaScript がまだ読み込まれていないときは、同じ action が生の JSON を返す代わりに元のページへリダイレクトします。 [メインガイドの React Router タブ](https://ikiform.com/ja/guides/feedback-form.md#form)では、公開ページのフォームを fetcher で送信します。ここではフォームはアプリの中、ログインの向こう側にあり、誰が送ったかは action が決めます。キー、許可ドメイン、基本については[サーバーフレームワークのドキュメントガイド](https://ikiform.com/ja/docs/guides/server.md)を見てください。コードはフレームワークモードの React Router 8 を対象にしています。 ## レイアウトの fetcher で変わること レイアウトにあるフィードバックフォームはすべての画面に同時に存在し、React Router はユーザーが移動してもマウントしたままにします。それが望ましい動作ですが、メインガイドでは答える必要のなかった 4 つの疑問が生まれます。 | 懸念 | レイアウトでは | このページでの対処 | | --- | --- | --- | | 誰が送ったか | ブラウザーはどのユーザーにでもなりすませる | action が署名付きの Cookie セッションを読む | | どの画面か | フォームはどの子ルートが表示されているかを知らない | 各ルートが `handle` で自分の名前を示し、`useMatches` で読む | | 残った状態 | fetcher の `data` はナビゲーション後も残る | `key` オプションで画面ごとに 1 つの fetcher | | JavaScript がまだない | `fetcher.Form` は本物のフォームなので、ブラウザーがリソースルートに送信する | action がドキュメントの送信を見分けて元に戻す | 図: React Router のフィードバック送信が同じリソースルートに届く 2 つの経路 1. ユーザーは、ログイン後のすべてのルートでレイアウトが描画するフォームで画面を評価します。 2. ハイドレーション後は、fetcher がバックグラウンドで送信します。action は Cookie セッション、Referer のページ、画面名を読みます。 3. action はシークレットキーとユーザーを付けて Ikiform に送信します。 4. 結果は data() で戻り、ナビゲーションなしでその場に表示されます。 5. ハイドレーション前は、ブラウザーがフォームをドキュメントとして送信します。action はナビゲーションを検出し、結果をクエリに入れて送信元のページにリダイレクトします。 1 つの action に 2 種類の呼び出し元。リダイレクトを受け取るのはブラウザーのナビゲーションだけで、fetcher の呼び出しはデータを受け取ります。 ## プロジェクトの準備 `create-react-router` で作ったプロジェクトで関わるファイル: `プロジェクトの構成`: ```text app/ routes.ts sessions.server.ts components/ feedback-form.tsx routes/ api.feedback.ts app-layout.tsx project-settings.tsx ``` action 用のリソースルートと、ログイン後の画面用のパスなしレイアウトを追加します。action があってデフォルトエクスポートのないモジュールはリソースルートなので、何も描画しません。 `app/routes.ts`: ```ts import { layout, route, type RouteConfig } from "@react-router/dev/routes"; export default [ route("api/feedback", "routes/api.feedback.ts"), layout("routes/app-layout.tsx", [route("projects/:id/settings", "routes/project-settings.tsx")]), ] satisfies RouteConfig; ``` **API keys** で `submissions:write` スコープのシークレットキーを作成します。サーバーは両方の値を `process.env` から読みます。サーバーが動く場所で設定し、キーには絶対に `VITE_` の接頭辞を付けないでください。付けるとクライアントのバンドルに入ってしまいます。 `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=a-long-random-string ``` 下の定義をフォームの **Fields** タブに貼り付けます。本人が入力するのは 2 つのフィールドで、残りは action が用意します。セッションの `email` によって、各通知の **Reply** が本人に届きます。 フォーム: In-app feedback - **この画面の使い心地はどうですか？** (`rating`, rating, 必須) - **どうすればもっと良くなりますか？** (`comment`, textarea) - **ページ** (`page`, url) - **画面** (`screen`, text) - **ユーザー** (`user_id`, text) - **メールアドレス** (`email`, email) `rating` に `9` を送るか、定義にないフィールドを送ると、action が受け取る `422` を確認できます。 ## 作ってみる ### Cookie セッションからユーザーを読む `createCookieSessionStorage` は `secrets` で Cookie に署名するので、ユーザーは中身を読めても変更はできません。ログイン処理がすでにセッションを書き込んでいるなら、そのストレージを再利用して `readUser` を追加してください。 `app/sessions.server.ts`: ```ts import { createCookieSessionStorage } from "react-router"; interface SessionData { userId: string; email: string; } export const { getSession, commitSession, destroySession } = createCookieSessionStorage({ cookie: { name: "__session", httpOnly: true, path: "/", sameSite: "lax", secrets: [process.env.SESSION_SECRET ?? ""], secure: process.env.NODE_ENV === "production", }, }); export async function readUser(request: Request) { const session = await getSession(request.headers.get("Cookie")); const id = session.get("userId"); const email = session.get("email"); return id && email ? { id, email } : null; } ``` `.server` の接尾辞で、このモジュールをクライアントのバンドルから除外します。コンポーネントからインポートするとビルドが失敗します。 ### リソースルート `app/routes/api.feedback.ts`: ```ts import { data, redirect } from "react-router"; import { readUser } from "~/sessions.server"; import type { Route } from "./+types/api.feedback"; const SCREEN = /^[a-z0-9/._-]{1,120}$/; function samePage(referer: string | null, origin: string) { try { const url = new URL(referer ?? ""); return url.origin === origin ? url.pathname : ""; } catch { return ""; } } export async function action({ request }: Route.ActionArgs) { const form = await request.formData(); const origin = new URL(request.url).origin; const path = samePage(request.headers.get("Referer"), origin); const native = request.headers.get("Sec-Fetch-Mode") === "navigate"; function reply(status: "sent" | "error", message: string, code = 200) { if (native) return redirect(`${path || "/"}?feedback=${status}`); return data({ status, message }, { status: code }); } const user = await readUser(request); if (!user) return reply("error", "You were signed out. Sign in, then send it again.", 401); const rating = Number(form.get("rating")); if (!Number.isInteger(rating) || rating < 1 || rating > 5) return reply("error", "Choose a score first.", 400); const screen = String(form.get("screen") ?? ""); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, Origin: origin, }, body: JSON.stringify({ rating, comment: String(form.get("comment") ?? "").slice(0, 4000), page: path ? origin + path : "", screen: SCREEN.test(screen) ? screen : "unknown", user_id: user.id, email: user.email, _gotcha: String(form.get("_gotcha") ?? ""), }), signal: AbortSignal.timeout(8000), }); } catch { return reply("error", "Feedback is unreachable right now. Try again shortly.", 502); } const result = await response.json().catch(() => null); if (result?.ok) return reply("sent", "Got it. Thank you."); return reply("error", result?.error?.fields?.comment?.[0] ?? result?.error?.message ?? "That didn't go through.", 502); } ``` - `samePage` は、`Referer` が自分のオリジンのときだけパスを残し、クエリ文字列は捨てます。アプリの URL では、クエリに ID やトークンが入っているからです。 - ブラウザー自身がページの読み込みとしてフォームを送信すると、`Sec-Fetch-Mode` は `navigate` になります。fetcher はバックグラウンドのリクエストとして送るので、fetcher には `data()` が、それ以外にはリダイレクトが返ります。 - エラーは throw せずに、4xx か 5xx の `data()` で返します。throw したエラーは最も近い `ErrorBoundary` まで伝わり、ユーザーが作業していた画面を置き換えてしまいます。 - `Origin` にはリクエスト自身のオリジンを設定します。`react-router dev` では `http://localhost:5173`、本番では自分のドメインです。 ### フォーム `app/components/feedback-form.tsx`: ```tsx import { useFetcher, useMatches, useSearchParams } from "react-router"; import type { action } from "~/routes/api.feedback"; const SCORES = ["Blocked", "Painful", "Okay", "Smooth", "Excellent"]; function useScreen() { const named = useMatches().flatMap((match) => { const screen = (match.handle as { screen?: string } | undefined)?.screen; return screen ? [screen] : []; }); return named.at(-1) ?? "unknown"; } export function FeedbackForm() { const screen = useScreen(); const fetcher = useFetcher({ key: `feedback:${screen}` }); const [params] = useSearchParams(); const busy = fetcher.state !== "idle"; const fallback = params.get("feedback"); const sent = fetcher.data?.status === "sent" || fallback === "sent"; const error = fetcher.data?.status === "error" ? fetcher.data.message : fallback === "error" ? "That didn't go through." : ""; if (sent) return

Got it. Thank you.

; return (
How is this screen working for you? {SCORES.map((label, index) => ( ))}