React App 錨<a>外部鏈接不適用於移動設備的額外點擊</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）中也沒有。 這意味着，如果您將其用作目標屬性的值，則不會有任何一致的行為。

有關詳細答案，請查看： target="_blank" vs. target="_new"