React js-点击链接后如何防止页面重新加载。现在整个页面都在点击链接刷新答案

【问题标题】：React js-How to prevent page reload once click on the link. Right now the whole page is getting refresh on clicking the linkReact js-点击链接后如何防止页面重新加载。现在整个页面都在点击链接刷新
【发布时间】：2020-12-31 22:58:13
【问题描述】：

我有发票编号的链接，所以一旦我点击它，它应该提供特定发票编号的数据而无需重新加载页面。[代码]

【问题讨论】：

标签： javascript reactjs hyperlink reload window.location

【解决方案1】：

使用“react-router-dom”包提供的组件，而不是锚标记“a”，使用“Link”或“NavLink”组件例子：从此 => <a href='#'>my-link></a> 至此 => <Link to='#'>my-link></Link>

更多信息，请查看官方文档https://reactrouter.com/docs/en/v6/examples/basic

【讨论】：

【解决方案2】：

您可以在事件实践中使用preventDefault方法防止页面重新加载。

function onLinkClick(e) {
   e.preventDefault();
   // further processing happens here
}

<a href="/my-invoice-link" onClick={onLinkClick} />

【讨论】：

【解决方案3】：

路由通常由浏览器处理，浏览器会在 URL 更改时发送 HTTP 请求。
在这里，您似乎希望 您的应用 处理 URL 更改，以便它根据 URL 显示内容。这称为客户端路由，您可以使用：

history API
一个库，例如react-router-dom

【讨论】：