インデックスクエリパラメータ

フォームを送信する際に、アプリのURLに ?index という見慣れないものが現れることがあります。

ネストされたルートのため、ルート階層内の複数のルートがURLに一致する可能性があります。UIを構築するために一致するすべてのルートのloaderが呼び出されるナビゲーションとは異なり、formが送信されると、1つのアクションのみが呼び出されます。

インデックスルートは親と同じURLを共有するため、?index パラメータを使用すると、2つを区別できます。

たとえば、次のフォームを考えてみましょう。

<Form method="post" action="/projects" />;
<Form method="post" action="/projects?index" />;

?index パラメータはインデックスルートに送信し、インデックスパラメータのないactionは親ルートに送信します。

<Form>がactionなしでインデックスルートでレンダリングされると、フォームがインデックスルートにポストされるように、?index パラメータが自動的に追加されます。次のフォームは、プロジェクトのインデックスルートのコンテキストでレンダリングされるため、送信されると /projects?index にポストされます。

app/routes/projects._index.tsx

function ProjectsIndex() {
  return <Form method="post" />;
}

コードを ProjectsLayout ルートに移動すると、代わりに /projects にポストされます。

これは <Form> とそのすべての親戚に適用されます。

function Component() {
  const submit = useSubmit();
  submit({}, { action: "/projects" });
  submit({}, { action: "/projects?index" });
}

function Component() {
  const fetcher = useFetcher();
  fetcher.submit({}, { action: "/projects" });
  fetcher.submit({}, { action: "/projects?index" });
  <fetcher.Form action="/projects" />;
  <fetcher.Form action="/projects?index" />;
  <fetcher.Form />; // コンテキスト内のルートをデフォルトとする
}