在 React 中打开带有函数的外部链接

Question

我正在尝试在 React 中创建一个按钮，该按钮会打开指向 google maps url 的外部链接。

我有一个功能，它要求用户提供他们的地理位置，一旦提供，就会将位置输入到 url 链接中，该链接获取从他们的地理位置到设定目的地的路线。

但是，我很难让按钮首先运行该功能并在新标签页中打开 URL。这就是我目前调用按钮组件的方式。

<Button variant="primary" onClick={this.onHandleClick}>Get Google Maps Directions</Button>

这是形成和打开链接的函数。

  onHandleClick = () => {
    var location = this.state.currentLocation;

    location.then(function(location){
      var link = `google.com/maps/dir/?api=1&origin=${location}&destination=50.927044,-1.299964&travelmode=driving`      

      //window.location.href = link;
      window.location.assign(link);
    })
  }

当前外部链接格式正确，但附加到 url 中现有的 localhost 域，因此当前未打开（或在新选项卡中）。

上述函数的url结果：

http://localhost:3000/google.com/maps/dir/?api=1&origin=50.4984,%20-2.6119074&destination=50.927044,-1.299964&travelmode=driving

我尝试在调用组件时设置 target="_blank"。

任何帮助将不胜感激！

谢谢， 最大

Answer 1

window.open(link, "_blank");

这将导致链接在新标签页中打开。

注意：如果您在链接前不包含“http://”或“https://”，则默认行为是将链接附加到当前域中，因此，如果您要打开外部链接，请务必包含 http/s。

Answer 2

回答以防它对未来的任何人有所帮助...

正如@user2950720 所建议的，window.open 方法正确地将链接打开一个新选项卡。

要阻止链接附加到 localhost/，请确保在链接的开头包含“https://”。