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域，因此当前无法打开（或在新选项卡中）。

上述功能的网址结果：

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

这将导致链接每次打开一个新标签页

Answer 2

进行答疑以防将来对任何人都有帮助...

如@ user2950720所建议，window.open方法正确地为链接提供了一个新标签。

要阻止链接追加到localhost /，请确保在链接的开头加上“ https：//”。

在React

2 个答案: