如何在 ReactJS 中提交后删除 URL 中的查询参数

Question

我有这个提交处理程序

const handleComment = async () => {
  try {
    axios.post(
      `http://localhost:8000/api/v1/post/${id}/comments`,
      {
        text: text,
      },
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );
    navigate(`/post/${id}`);
  } catch (error) {
    console.log(error);
  }
};

我在这里用

<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)}
    />
    <input type="hidden" name="user_id" value={userId} />
    <input type="hidden" name="post_id" value={post.id} />
  </Form.Group>
  <Button type="submit">Send</Button>
</Form>

预期的结果是

http://localhost:5173/post/2

但我得到

http://localhost:5173/post/2?text=test&user_id=2&post_id=2

Answer 1

您可以使用

event

处理程序中的

onSubmit

来防止默认操作发生。

您可能还想使用

post.id

而不是

id

传递给 url 的

const handleComment = async (event) => {
  event.preventDefault();
  try {
    axios.post(
      `http://localhost:8000/api/v1/post/${post.id}/comments`,
      {
        text: text,
      },
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );
    navigate(`/post/${post.id}`);
  } catch (error) {
    console.log(error);
  }
};