history.push not redirecting to an external URL

Question

I have a function that runs when a button is clicked. I want to direct the user to an external site. I can't seem to do it with history.push as that appends the site to localholst ie http://localhost:8080/EXTERNALSITE

I am using RR v5

The code below works, but how can I use react router?

  const handleButtonClick = () => {
    if (foo) {
      window.location.replace(EXTERNALSITE); // how to use RR here?
    } else if (userToken) {
      history.push('/home');
    } else {
      logout();
    }
  };

Answer 1

I can't find a way to open an external link with react-router. However, I think it makes sense because react-router is used to handle the internal links of your app, not the external links.

So, how to navigate to an external link? In your context, I suppose we can use window.location.href

function openExternalLink(link) {
  window.location.replace(link);
}

By setting a new value to location.href, the old link is replaced by the new link (user cannot navigate back to the old link). If you don't want this behavior, you can use window.location.href = link instead.

For more advance usages, please check the document.