索引查询参数

概述

你可能会发现，在提交表单时，应用程序的 URL 中会出现一个奇怪的 ?index。

由于嵌套路由的存在，路由层级中的多个路由可以匹配同一个 URL。与导航不同（导航会调用所有匹配路由的 loader 来构建 UI），当提交一个 form 时，只有一个 action 会被调用。

因为索引路由与其父路由共享相同的 URL，所以 ?index 参数可以让你区分这两者。

理解索引路由

例如，考虑以下路由结构：

import {
  type RouteConfig,
  route,
  index,
} from "@react-router/dev/routes";

export default [
  route("projects", "./pages/projects.tsx", [
    index("./pages/projects/index.tsx"),
    route(":id", "./pages/projects/project.tsx"),
  ]),
] satisfies RouteConfig;

这将创建两个匹配 /projects 的路由：

父路由 (./pages/projects.tsx)
索引路由 (./pages/projects/index.tsx)

表单提交目标

例如，考虑以下表单：

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

带有 ?index 参数的表单会提交到索引路由；没有该参数的表单会提交到父路由。

当一个 <Form> 在索引路由中渲染且没有指定 action 时，?index 参数会自动附加，以便表单提交到索引路由。以下表单在提交时将提交到 /projects?index，因为它是在 projects 索引路由的上下文中渲染的：

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

如果你将此代码移动到项目布局文件（在本例中是 ./pages/projects.tsx），它将改为提交到 /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
}