在ReactJS中滚动浏览各部分时如何更新URL哈希

问题描述

我已经在这个问题上苦苦挣扎了大约2个小时，找不到解决方法。

当我滚动浏览这些部分时，我想更新自己的网址哈希（＃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并自动滚动到此部分，从这里开始一切都很好。但是，如果我滚动（无需单击任何地方）到“技能”部分，那么我希望该网址自动转到localhost：3000 /＃skills，并且导航栏突出显示该技能。

希望您可以帮助我解决此问题。谢谢！

解决方法

您应该只使用'react-router-dom'库来路由和处理Url路径。他们有非常清晰的文档https://reactrouter.com/web/example/basic。 For You help 只需在to的{{1}}道具中定义您想去的路径！

Link

现在只需将其包装在

中即可导航到该声明的路径

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

通过所有这些操作。Url哈希不再是问题；）

javascript reactjs reactjs scroll sections