Question

是否可以使用POST（npm）库处理react-router-dom请求？

为什么？付款网关会将成功付款的用户重定向回平台。我可以使用GET或POST请求通过重定向页面传输数据。但是我不喜欢将数据显示在URL中。总是欢迎使用其他选项，我使用的是REST API（Node.JS，Express）和网站/仪表板（ReactJS）

Answer 1

您可以在快递服务器上处理POST请求，然后重定向到应用程序的静态页面：

app.post('/payment_webhook', (req, res) => {
    const paymentOk = req.body.payment // handle POST data
    if (paymentOk) {
        res.redirect('http://app.com/payment_success');
    } else {
        res.redirect('http://app.com/payment_failed');
    }
});

Answer 2

我了解您的需求，但是您无法POST浏览器。如果您不满意以URL中的GET参数形式传递数据，则可以：

用户提交时将数据存储在LocalStorage中
在重定向后提供包含购买信息的服务器呈现的静态HTML
使用AJAX或fetch()（或您喜欢的数据抓取工具）在页面加载时异步获取用户的购买数据。

由于您身处React世界，因此我建议您在这里推荐第三个选项。如何获取数据，构建API端点，存储数据，然后显示数据很好超出了此问题的范围，因此我建议您使用Google谷歌搜索。这是一个起点：https://code.tutsplus.com/tutorials/introduction-to-api-calls-with-react-and-axios--cms-21027

Answer 3

我和一位朋友讨论了同样的问题，到目前为止我们看到了两种方法：

让支付网关 return_url 成为后端 API (rails api) 的端点，它将提交到支付网关（并可能更新 BD 中的订单），然后它将重定向回您的前端应用
将网关交易令牌存储在DB中的订单对象上，并让支付网关return_url返回一个动态订单url，因此，react现在应该呈现哪个订单，然后异步询问后端（rails 服务）从订单对象中提取令牌并执行提交（确认）并更新它的状态并将订单对象返回给反应，然后反应现在可以显示订单是否成功。

我们选择了选项 #2，因为我觉得前端 (react) 应该是我们系统的主要通信网关，而唯一与后端通信的应该是前端。

更新：选项 #2 不起作用，因为你不能对 react-app 进行 POST 因此，我们使 return_url 是动态的，我们立即使用 order_id 作为查询参数的 url 重定向到前端，然后，前端尝试加载订单时，在后端我们进行支付网关确认，更新订单对象并将更新后的订单对象返回给前端

ReactJS-使用React Router DOM处理POST请求

3 个答案: