滚动浏览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 中定义路径即可！toLink

       <ul>
          <li>
            <Link to="/test">Home</Link>
          </li>      
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

现在只需将其包装在

          <Route exact path="/test">
            <Home />
          </Route>

通过完成这一切。Url Hash 将不再是问题;)