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

Posted 2023-02-21

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

【英文标题】：Adding target=_blank to link tag in button in react does not open new page but disables it?

【发布时间】：2021-02-02 04:42:45

【问题描述】：

我正在使用 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。

【问题讨论】：

你试过target="_blank" 吗？

是的，我也试过了

这能回答你的问题吗？ React-Router open Link in new tab

不，我访问过那个页面。那里的大多数答案必须使用“http:”输入 URL，我不确定如何传递动态 url？

【参考方案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>
);

【讨论】：

如果我不使用标签，路由会在开头没有#，这会导致页面找不到并重新路由到索引页面。I' m 使用哈希路由器。

可以不将#添加到路径变量中吗？但我之前的回答仍然有效，如果您在新标签页中打开，则无需使用 react-router 中的Link。

但是，我尝试将其设置为按钮的样式，如果我在 标记内嵌入按钮标记，问题仍然存在吗？

这是一个不同的问题 :-)