如何在单页 React 应用程序中为链接实现 "Open link in new tab"
How to implement "Open link in new tab" for links within Single Page React app
为了在我的 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'/>
从表面上看，这看起来很有效，我们在右键单击时会看到“在新选项卡中打开 link”，单击左键将导航到所需的页面。这种方法的问题在于它违背了所需的 单页应用程序 结构。当左键单击按钮时（因此激活到 href 的导航），它会从头开始加载（重新加载）页面。这意味着客户端将再次向服务器请求整个应用程序（bundle.js）。这会在服务器上造成不必要的负载并延长客户端的加载时间。
我的问题是：有没有一种方法可以为 Link/Button 启用“在新选项卡中打开 link”，而无需在左键单击 Link/Button 时重新加载页面。
您可以使用 Link 组件（来自 react-router-dom），它本质上是 anchor 标签的包装器并为您处理重新加载的东西。你可以像这样包装 Button :-
<Link to='/account'><Button content='My Account'/></Link>
更多详情，请访问 - https://reactrouter.com/web/api/Link
为了在我的 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'/>
从表面上看，这看起来很有效，我们在右键单击时会看到“在新选项卡中打开 link”，单击左键将导航到所需的页面。这种方法的问题在于它违背了所需的 单页应用程序 结构。当左键单击按钮时（因此激活到 href 的导航），它会从头开始加载（重新加载）页面。这意味着客户端将再次向服务器请求整个应用程序（bundle.js）。这会在服务器上造成不必要的负载并延长客户端的加载时间。
我的问题是：有没有一种方法可以为 Link/Button 启用“在新选项卡中打开 link”，而无需在左键单击 Link/Button 时重新加载页面。
您可以使用 Link 组件（来自 react-router-dom），它本质上是 anchor 标签的包装器并为您处理重新加载的东西。你可以像这样包装 Button :-
<Link to='/account'><Button content='My Account'/></Link>
更多详情，请访问 - https://reactrouter.com/web/api/Link