【问题标题】:I need to avoid reloading the page when clicking tag <a>点击标签 <a> 时我需要避免重新加载页面
【发布时间】:2021-12-30 23:33:33
【问题描述】:

我正在使用 React 创建一个 SPA,并且需要避免在单击标签 &lt;a&gt; 时重新加载页面,或者找到一种方法将 id 以在另一个“页面”上滚动到标签。

&lt;Link to="/proyectos" className="cajaCinco"&gt; &lt;h2 className="title"&gt;Experiencias&lt;/h2&gt; &lt;/Link&gt;

【问题讨论】:

  • 您发布的代码似乎不完整?
  • 什么是Link?它是样式组件&lt;a&gt; 元素吗?它来自 React 路由器吗?是别的吗?
  • 链接来自 React-Router-Dom,我使用 V 6.2.1
  • 请提供足够的代码,以便其他人更好地理解或重现问题。

标签: javascript html reactjs single-page-application


【解决方案1】:

您的代码示例看起来不完整,但通常为了防止事件执行其默认操作,您可以使用 Event.preventDefault()

例如:

<a onClick={(e) => e.preventDefault()} />

【讨论】:

  • 发布后发现代码并没有完全上传,已经修复了。谢谢!关于您的回复,我在 onClick 事件中尝试使用非箭头功能但不起作用,现在将尝试使用箭头功能。
  • 当我点击 &lt;a&gt; 并让 onClick= {(e)=>e.preventDefault()} 标签不重定向到“contactame”
  • 您不希望页面重新加载,但仍希望页面移动到联系表单?您是否期望页面动态加载,但 URL 没有变化?
  • 类似这样,我需要更改 url 但没有浏览器加载或重新加载页面,react router dom 允许根据 url 显示一个或其他组件
  • 如果页面重新加载,我会丢失我的 redux 全局状态(我将其用于主题选择器)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-18
相关资源
最近更新 更多