如何从外部API调用重定向前端React应用程序

Question

我正在构建一个迷你项目，我正在使用一个名为Paystack的支付处理器。通常，当用户发起支付时，支付处理器为该当前支付交易生成唯一链接。所有的支付处理器的请求都是在后端设置，我基本上是使用NodeJS和快递。现在，我当前的问题是使用生成的链接将前端重定向到支付网关。用于处理的代码基本上看起来像这样。

    const config = {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization:
          "Bearer ApiKey",
      },
    };
    try {
      const res = await axios.post(
        `${API_URL}/payment/paystack/pay/${ref}`,
        config
      );
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

res的结果是生成的链接。如何让我的前端转到生成的链接？

任何帮助都将不胜感激。谢谢。

Answer 1

如果是React应用程序链接，请使用React历史记录。

对于React类组件：

this.props.history.push(url);

对于React钩子：

import { useHistory } from "react-router-dom";
...
const history = useHistory();
...
history.push(url);

如果它是一个外部链接，你不应该使用React的东西。只需使用window.location即可

window.location.href = url;

Answer 2

你可以把你的链接分配给window.location，然后让你的浏览器来处理剩下的事情。

window.location = link;

Answer 3

您可以简单地调用window.open()并将链接作为参数传递。例如

 window.open("https://www.w3schools.com");

或者，您可以使用react-router