将 target=_blank 添加到 react 按钮中的链接标签不会打开新页面但会禁用它？

Question

我正在使用 React + Material UI 开发网页。我想打开一个指向指定链接的新选项卡，我试过了。如果我不添加 target= _blank 但它会在同一个选项卡中打开，它会重定向到链接。如果我添加 target=_blank 按钮根本不起作用？我拥有的 react-route-dom 版本是 ^5.2.0。我已经在边缘和铬上尝试过，所以问题不是特定于浏览器的。我正在使用有路由器，并且应用程序可能会使用不同的基本 url 名称部署，所以我想避免使用“http://...”对 url 进行硬编码。任何帮助将不胜感激。

 const markLink = (
            <Link
                to={
                    {
                        pathname: "/AssessmentList",
                        search: "?groupId =" + this.state.groupId + " & unitOfferingId=" + this.state.unitOfferingId
                            + "&userId=" + this.state.userId + "&role=" + this.state.role + "&groupName=" + this.state.selectedGroup.group_name
                    } 
               
                } 
                target="_blank"
                style={{ textDecoration: "none", color: "white" }}
            >

                Mark
            </Link>);

然后我像这样在我的按钮中使用它

<ButtonMenu items={[]} name={markLink} working={this.state.project_archived} action={() => {
            }} />

编辑：我也试过 target={"_blank"}。我已经尝试过以前帖子中的建议，但似乎大多数 URL 需要是“http://”而不是相对路径。我不确定如何传递动态 URL。

Answer 1

使用react-router 的目的是根据url 渲染组件。如果您打算在新链接上打开页面，只需使用常规 a 元素即可。

const { groupId, unitOffering, userId, role, selectedGroup } = this.state;

const path = `/AssessmentList?groupId=${groupId}&unitOfferingId=${unitOfferingId}&userId=${userId}&role=${role}&groupName=${selectedGroup.group_name}`;

return (
  <a
    href={path}
    target="_blank"
    rel="noopener noreferrer"
    style={{ textDecoration: "none", color: "white" }}>
    Mark
  </a>
);