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

フォームを送信すると、アプリの URL にワイルドな ?index が表示されることがあります。

ネストされたルートのため、ルート階層内の複数のルートが URL に一致する可能性があります。ナビゲーションでは、一致するすべてのルートの loader が呼び出されて UI が構築されますが、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 />; // コンテキスト内のルートをデフォルトとする
}