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

Question

我已经为这个问题纠结了约2小时，但无法找到解决方法。

当我滚动到相应的区域时，我想更新我的URL哈希（#home、#about等），同时在我的导航栏中突出显示当前区域。我在Jquery中找到了不同的答案，但问题是我正在使用ReactJS，有人告诉我在ReactJS中使用Jquery不是一个好主意/有用的方法。

我也找到并尝试了这个包：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>

当我点击“关于我的网址”时，它会转到：localhost:3000/#about 并自动滚动到此部分，从这里开始一切都很好。 但是，如果我滚动（不点击任何地方）到技能部分，那么我希望网址自动转到localhost:3000/#skills，并使导航栏突出显示Skills。 希望你能帮我解决这个问题。谢谢！

- Kaaedan

---

你找到解决方案了吗？我也遇到了同样的问题。 - Rmaxx

你找到解决方案了吗？ - Salil Rajkarnikar

仍在思考这个问题，很多网站是如何做到的呢？ - Ian Rios

Answer 1

你可以通过检查区块高度和滚动位置来解决这个问题 window.history.replaceState(null, null, #${section.id});。在这里，我附加了一个事件监听器来检查滚动位置。

import React, { useEffect } from "react";

function Test() {
  useEffect(() => {
    const handleScroll = () => {
        const sections = document.querySelectorAll('section[id]');
        const scrollPosition = window.pageYOffset;
  
        sections.forEach(section => {
          const sectionTop = section.offsetTop;
          console.log(sectionTop , section.offsetHeight , "" , section , scrollPosition) ;
          const sectionBottom = sectionTop + section.offsetHeight;
  
          if (scrollPosition >= sectionTop  && scrollPosition < sectionBottom) {
            window.history.replaceState(null, null, `#${section.id}`);
          }
        });
      };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div>
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#skills">Skills</a>
        </li>
      </ul>

      <section id="about">
        <h2>About</h2>
        <p>you can put here  content to test</p>
      </section>

      <section id="skills">
        <h2>Skills</h2>
        <p>you can put here  content to test</p>
      </section>
    </div>
  );
}

export default Test;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

- jainam shah

Answer 2

你应该使用'react-router-dom'库来进行路由和处理Url路径。他们有非常清晰的文档https://reactrouter.com/web/example/basic。 为您提供帮助 只需在的to属性中定义要前往的路径即可！

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

现在只需将声明的路径包装起来，然后导航到该路径。

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

通过这样做，URL哈希将不再是一个问题了；）

- Muzamil ijaz

---

我不确定你是否完全理解我的问题，我在谈论单个页面上的部分，我不想在几个页面之间导航。我按照你说的尝试了更改部分，但问题是它只是在路径名中呈现组件。我正在编辑我的帖子以使其更清晰 :) - Kaaedan