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

Question

我已经在这个问题上苦苦挣扎了 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 并且导航栏突出显示技能。
希望你能帮助我解决这个问题。谢谢 !

Answer 1

您应该简单地使用“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 将不再是问题 ;)