gpt4 book ai didi

javascript - 滚动浏览 ReactJS 中的部分时如何更新 url 哈希

转载 作者:行者123 更新时间:2023-12-03 17:10:50 25 4
gpt4 key购买 nike

我已经在这个问题上苦苦挣扎了 2 个小时左右,但找不到解决方法。
当我滚动浏览这些部分时,我想更新我的 url 哈希(#home、#about 等),并以同样的方式突出显示导航栏中的当前部分。我在 Jquery 中找到了不同的答案,但问题是我正在使用 ReactJS,并且有人告诉我,将 Jquery 与 ReactJS 一起使用并不是一个好主意/有用。
我也找到并尝试了这个包:https://www.npmjs.com/package/react-scrollable-anchor
但问题是只有在滚动结束时才更新哈希。
编辑 :

<ul>
<li>
<a href="#">Home</Link>
</li>
<li>
<a href="#about">About</Link>
</li>
<li>
<a href="#skills">Skills</Link>
</li>
</ul>
当我单击关于我的 url 时,会显示为:localhost:3000/#about 并自动滚动到此部分,一切都很好。
但是如果我滚动(不点击任何地方)到技能部分,那么我希望 url 自动转到 localhost:3000/#skills 并且导航栏突出显示技能。
希望你能帮助我解决这个问题。谢谢 !

最佳答案

您应该简单地使用“react-router-dom”库来路由和处理 URL 路径。他们有非常清晰的文档 https://reactrouter.com/web/example/basic .For You help只需在 to 中定义路径即可Link 的 Prop 你想去哪里 !

       <ul>
<li>
<Link to="/test">Home</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
现在只需将其包装在
          <Route exact path="/test">
<Home />
</Route>
通过做这一切。Url Hash 将不再是问题 ;)

关于javascript - 滚动浏览 ReactJS 中的部分时如何更新 url 哈希,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63713790/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com