React - 支付网关重定向后添加的查询参数消失

Question

初始参数： https://test.website.com/Form?value=testing&key=

根据用户选择，我使用以下代码添加查询参数 value key = "some_value"

      const value = new URLSearchParams(this.props.location.search).get("value");
      const key = new URLSearchParams(this.props.location.search).get("key");
      if (key === "") {
        this.props.history.push({
          pathname: "/Form",
          search: `?value=${value}&key=${key}`,
        });
      }

https://test.website.com/Form?value=testing&key=some_value但在此之后我有支付网关集成，点击同一标签页中的按钮将被重定向到支付页面，成功消息后它会重定向回来到父页面，再添加一个与付款相关的查询参数。 那时，添加的密钥丢失

即https://test.website.com/Form?value=testing&key=&paymentStatus=Success

Answer 1

支付网关最终控制您的用户在完成交易后将被重定向到的位置。 听起来在您的情况下，网关正在做一些魔术来将用户重定向回他们来自的 URL。

支付网关通常允许您（集成商）自定义他们返回的 url。 Stripe 在其客户端 JavaScript 客户端中successUrl successUrl。 returnUrl在其付款流程中接受 returnUrl。 你没有提到你正在使用的网关，但我怀疑它会有类似的功能。

如果他们不这样做 - 你将不得不依靠魔法。 我建议确保https://test.website.com/Form?value=testing&key=some_value url 一直在浏览器的历史中。 您在此处显示的代码片段将其推送到组件的历史记录中，但不清楚该历史记录是否与浏览器的历史记录相同。