React Router DOM v6.4如何向action函数传递额外数据？

先看你给出的Route Action代码：

<Route
  action={async ({ request, params }) => {
    let formData = await request.formData();
    // ...
  }}
/>

你问的是除了request和params外，怎么获取额外提交信息，这里给你几个实用方法：

• 从request.url解析查询参数
  你之前尝试在form的action里加查询参数，但不知道怎么获取——其实不用location对象，直接通过request.url就能解析。比如你的form action是/submit?additional_data=some%20additional%20data，在action函数里可以这么写：

  const url = new URL(request.url);
  const additionalData = url.searchParams.get('additional_data');
  // 就能拿到"some additional data"
  

• 用隐藏表单字段传递
  把额外数据放在form的隐藏input里，提交时会自动包含在formData中，比如：

  <form method="post" action="/submit">
    <input type="hidden" name="additional_data" value="some additional data" />
    <!-- 其他表单字段 -->
    <button type="submit">提交</button>
  </form>
  

  然后在action函数里直接从formData获取：

  const additionalData = formData.get('additional_data');
  

• 通过路由params传递
  如果额外信息适合作为路由的一部分，可以调整路由规则，把数据放在路径参数里：

  <Route path="/submit/:additionalData" action={/* ... */} />
  

  提交时form的action设为/submit/some-additional-data，然后在action函数的params里就能拿到params.additionalData。

内容的提问来源于stack exchange，提问作者Mr.Engineer ET