React Router v6表单提交后URL附加?index参数的原因咨询

使用react-router-dom v6的Form组件提交表单后，URL从localhost:5173变为localhost:5173?index。路由配置如下：

const routesConfig = [
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Index />,
        action: indexAction,
      },
    ],
  },
];

Index组件简化代码：

import { useActionData, Form } from 'react-router-dom';

export function action() {
  return { foo: 'bar' };
}

const Index = () => {
  const actionData = useActionData();

  const foo = actionData ? actionData.foo : null;

  return (
    <div>
      <h3>index</h3>
      {foo ? <p>{foo}</p> : null}
      <Form method='post'>
        <button type='submit'>submit</button>
      </Form>
    </div>
  );
};

export default Index;

调试发现仅当子路由声明为index:true时，URL会附加?index查询参数；若替换为path:"/"，提交后URL不会出现该参数。已通过修改路由为path:"/"解决问题，但不确定该方案是否正确，寻求解答。

这是react-router-dom v6索引路由的正常行为，原因如下：

• 索引路由没有独立路径，当Form未指定action属性时，默认使用当前路由的提交地址。React Router会通过?index查询参数标识要触发的是索引路由的action，以此区分父路由和子索引路由。
• 将index:true改为path:"/"后，该路由变为普通子路由，路径与父路由完全一致，Form提交时直接使用路径/，无需额外查询参数标识，因此URL不会出现?index。

你的解决方案是可行的，但需注意两种路由配置的细微差异：

1. 索引路由：仅在父路由匹配且无其他子路由匹配时渲染，是父路由的默认内容，无独立路径。
2. 路径为/的子路由：与父路由路径完全重合，会和父路由同时匹配，本质是独立子路由，而非父路由的默认内容。

如果该路由是父路由的默认内容，更规范的做法是保留index:true，同时给Form组件显式指定action属性为"/"，提交时就不会附加?index参数：

<Form method='post' action="/">
  <button type='submit'>submit</button>
</Form>

这样既符合索引路由的设计意图，又能解决URL出现额外查询参数的问题。

内容的提问来源于stack exchange，提问作者bleep