ReactJS中提交表单后如何移除URL中的查询参数？

问题原因 #

你的表单触发了默认的GET提交行为，即便你写了axios的POST请求，浏览器仍会按HTML表单默认规则把所有表单字段拼到URL上，同时执行页面跳转，导致出现带参数的URL。另外你表单里的hidden字段并没有在axios请求中被使用，属于冗余内容。

解决方案 #

1. 修改提交函数，阻止默认行为并完善请求

给handleComment函数添加事件参数，调用e.preventDefault()阻止表单默认提交，同时加上await确保请求完成后再跳转，还要把需要的参数（user_id、post_id）加到axios的请求体里：

const handleComment = async (e) => {
  e.preventDefault(); // 阻止表单默认GET提交行为
  try {
    await axios.post(
      `http://localhost:8000/api/v1/post/${id}/comments`,
      {
        text: text,
        user_id: userId, // 后端需要的话，这里手动传入
        post_id: post.id
      },
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );
    navigate(`/post/${id}`);
  } catch (error) {
    console.log(error);
  }
};

2. 清理表单冗余字段

因为参数已经在axios请求中手动传递，表单里的hidden字段可以直接删除：

<Form onSubmit={handleComment}>
  <Form.Group className="mb-3 mt-2">
    <Form.Label>Create An Comment</Form.Label>
    <Form.Control
      as="textarea"
      placeholder="Enter Comment"
      name="text"
      maxLength={255}
      onChange={(e) => setText(e.target.value)}
    />
  </Form.Group>
  <Button type="submit">Send</Button>
</Form>

关键说明 #

• e.preventDefault()是核心：它会阻止浏览器默认的表单提交逻辑，避免URL被拼接参数
• 加await是为了保证评论提交请求完成后再跳转页面，防止出现请求未完成就跳转的异常情况
• 表单hidden字段无需保留：你的axios请求是手动构造请求体，不是使用表单的FormData，所以这些字段不会被axios读取，完全可以删除

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