ReactJS

Question

有没有办法使用 react-router-dom (npm) 库来处理 POST 请求？

为什么？支付网关将成功支付的用户重定向回平台。我可以使用 GET 或 POST 请求通过重定向页面传输数据。但我不喜欢 URL 中的数据可见。其他选项总是受欢迎的，我正在使用 REST API (Node.JS, Express) 和 website/dashboard (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 端点、存储数据，然后显示它以及超出了这个问题的范围，所以我建议进行一些谷歌搜索。这是一个起点：https://code.tutsplus.com/tutorials/introduction-to-api-calls-with-react-and-axios--cms-21027

Answer 3

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

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

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

更新：选项 #2 无效，因为你不能对反应应用程序执行 POST 因此，我们使 return_url 成为动态的，我们立即重定向到前端url 以 order_id 作为查询参数，然后，当前端尝试加载订单时，在后端我们进行支付网关确认，更新订单对象和 return 更新的订单反对前端

ReactJS - 使用 React 路由器 dom 处理 POST 请求

ReactJS - Handle POST requests using react router dom

javascript

react-router

react-router-dom