如何为单页 React 应用程序中的链接实现"Open link in new tab"

Question

在我的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)。这会在服务器上造成不必要的负载，并延长客户机的加载时间。

我的问题是:有没有一种方法来启用"打开链接在新的标签"当左键点击链接/按钮时，不需要重新加载页面。

Answer 1

你可以使用Link组件(来自react-router-dom)，它本质上是一个围绕anchor标签的包装器，并为你处理重新加载的东西。您可以像这样包装Button:-

<Link to='/account'><Button content='My Account'/></Link>

详细信息，请访问- https://reactrouter.com/web/api/Link