React App anchor <a>外部链接不工作的额外点击移动

Question

我遇到了一个奇怪的问题，外部链接的<a>锚不像预期的那样在我的React应用程序的移动视图中运行。点击一个外部链接最初在移动设备上工作良好，启动一个新的选项卡，但是随后的链接点击相同的，或其他<a>元素导致什么都没有发生。

这很奇怪，因为这在桌面和更大的视口上工作得很好。

下面是我如何在组件中使用锚的示例代码片段:

import React from "react";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
function ProjectExample() {
return (
<div>
<Row className="project-row">
<Col>
<h3>Foo Bar</h3>
<p>
See my project here: <a href="https://github.com" target="_new">GitHub</a>. 
</p>
</Col>
</Row>
</div>
);
}
export default ProjectExample;

看起来很基本，对吧?有没有人知道为什么外部链接行为会导致手机上的连续点击失败?这个项目在某种意义上是骨架，对于内部导航，我只使用react-scroll来滚动类似于页面锚定的页面。我没有使用react-router-dom或任何其他形式的导航。这些链接是纯粹的外部网站，没有任何点击事件等与他们相关。

有没有什么基本的东西我忽略了?

总结外部链接在我的应用程序中用作标准html<a>锚元素。这些指向外部站点，并且在台式机/笔记本电脑较大的视口上工作良好，但对于移动设备，只有初始链接点击将打开一个新标签-连续和额外的链接点击(甚至是相同的链接)将不会触发(例如，什么都没有发生)。我做错了什么?

Answer 1

使用"_blank">

根据HTML5规范:

一个有效的浏览上下文名称是至少有一个字符不以U+005F LOW LINE字符开头的字符串。(以下划线开头的名称为特殊关键字保留)

有效的浏览上下文名称或关键字是任何字符串，该字符串要么是一个有效的浏览上下文名称，要么是一个ASCII不区分大小写的匹配:_blank， _self， _parent，或_top."——源

这意味着在HTML5中没有_new这样的关键字，在HTML4中也没有(因此XHTML也是如此)。这意味着，如果您将this用作目标属性的值，将不会有一致的行为。

详细答案请查看:target="_blank"与目标="_new">