How Do I Redirect My Frontend React Application From External API Call

Question

I am building a mini project and I am using a Payment Processor called Paystack. Typically, when a payment is initiated by the user, the payment processor generates a unique link for that current payment transaction. All the payment processor requests are set up in the Backend, I am using NodeJS and Express basically. Now my current issue is redirecting the frontend to the payment gateway using the generated link. The code for handling that looks like this basically.

    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);
    }
  };

The result of res is the link generated. How do I make my frontend goto the generated link?

Any help would be appreciated. Thank you.

Is it an external link or internal one?

masao
– masao

2020-09-25 12:26:25 +00:00
Commented Sep 25, 2020 at 12:26 — masao
– masao, Commented Sep 25, 2020 at 12:26

masao · Accepted Answer · 2020-09-25 12:32:17Z

1

If it's the React app link, use React history.

For React class component:

this.props.history.push(url);

For React hook:

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

If it's an external link, you should not use React stuff. Just use window.location:

window.location.href = url;

answered Sep 25, 2020 at 12:32

masao

8955 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prateek Thapa · Accepted Answer · 2020-09-25 12:27:22Z

1

You could assign your link to window.location and let your browser handle the rest.

window.location = link;

answered Sep 25, 2020 at 12:27

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Comments

Mustakim · Accepted Answer · 2020-09-25 12:40:34Z

1

You could simply call window.open() and pass the link as an argument. For example

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

Or you could use react-router

answered Sep 25, 2020 at 12:40

Mustakim

4392 gold badges7 silver badges17 bronze badges

Collectives™ on Stack Overflow

How Do I Redirect My Frontend React Application From External API Call

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related