Index Query Param

索引查询参数

提交表单时，您可能会发现应用程序的 URL 中出现一个不规则的?index。

由于存在嵌套路由，因此路由层次结构中的多个路由可以与 URL 匹配。与导航不同，在导航中，所有匹配的路由 loader 都会被调用来构建 UI，而提交 form 时，只会调用一个操作。

由于索引路由与其父路由共享相同的 URL，因此 ?index 参数可以让您消除两者之间的歧义。

例如，考虑以下形式：

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

?index 参数会提交给 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 />; // defaults to the route in context
}