为了在我的 React 应用程序中进行导航，我将 React Router DOM 与 History 结合使用。包。
这是导航在应用中的外观示例:
navigateToAccount() {
history.push('/account');
}
在渲染中:
<Button content='My Account' onClick={this.navigateToAccount}/>
/*Button from Semantic UI React*/
到目前为止，这只会将客户端导航到“/account”页面。但问题是，不存在右键单击“在新选项卡中打开”的选项。因此，我尝试通过简单地使用 href 标签来修复它，如下所示:
<Button content='My Account' href='/account'/>
从表面上看，这似乎有效，右键单击时我们会得到“在新选项卡中打开链接”，左键单击将导航到所需的页面。这种方法的问题在于它违背了所需的单页应用程序结构。当左键单击按钮(从而激活导航到 href)时，它会从头开始加载(重新加载)页面。这意味着客户端将再次向服务器请求整个应用程序(bundle.js)。这会给服务器带来不必要的负载，并给客户端带来更长的加载时间。
我的问题是:有没有一种方法可以为链接/按钮启用“在新选项卡中打开链接”，而无需在左键单击所述链接/按钮时重新加载页面。
最佳答案
您可以使用Link组件(来自react-router-dom)本质上是 anchor 的包装器标记并为您处理重新加载的内容。您可以包裹Button像这样:-
<Link to='/account'><Button content='My Account'/></Link>
了解更多详情，请访问 - https://reactrouter.com/web/api/Link
关于html - 如何为单页 React 应用程序中的链接实现 "Open link in new tab"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66046846/