如何使用反应路由器和反应滚动在特定 id 上平滑滚动到另一个页面

Question

我正在尝试使导航栏导航到另一个页面并向下滚动到此页面上的某个 ID

这是我的 protofolio 的导航栏组件，它有 3 个链接，Projects应该转到Home，然后向下滚动到projects“项目”部分中的 id

import React, { Component } from "react";
import logo from "../../images/logo.png";
import { Link } from "react-router-dom";
import Scroll from "react-scroll";
import "./NavBar.css";
const ScrollLink = Scroll.Link;

class NavBar extends Component {
  render() {
    return (
      <div className="NavBar">
        <Link to="/" className="logo-container">
          <img className="logo" src={logo} alt="Mahboub logo"></img>
        </Link>
        <div className="Nav-links">

          <Link to="/">Home</Link>
          <ScrollLink
            className="navy"
            smooth={true}
            duration={500}
            to="projects"
          >
            projects
          </ScrollLink>

          <Link to="/">Contacts</Link>
        </div>
      </div>
    );
  }
}
export default NavBar;

这是主页中项目部分的项目组件

function Projects() {
  return (
    <div className="Home-Projects">
      <Element id="projects">
        <h1>Projects</h1>
      </Element>
      <div className="Projects-container">
        <ProjectElement />
      </div>
    </div>
  );
}

Answer 1

如果“duration”参数对您来说不是很重要，并且您对 Hooks 没有问题，我想建议如下解决方案。

• 你摆脱了 Scroll 组件，并在你的 NavBar 中使用来自 RR 的普通链接，就像这样

  <Link to="/#projects">projects</Link>
  

• 由于引入了RR v5.1 Hooks。其中有 useLocation 钩子。在 Projects 组件的开头插入该钩子，如下所示：

  function Projects() {
  const location = useLocation()
  ...
  

当您从第 1 页点击链接时，您将获得表单的新位置对象

    location = {
        ...
        pathname:"/",
        ...
        hash: "#projects"
    }

• 像这样调用useEffect钩子useLocation：

    useEffect(()=> {
            if (location.hash) {
                let elem = document.getElementById(location.hash.slice(1))
                if (elem) {
                    elem.scrollIntoView({behavior: "smooth"})
                }
            } else {
            window.scrollTo({top:0,left:0, behavior: "smooth"})
            }
    }, [location,])

就是这样。如您所见，如果您的 url 中没有哈希值，您的页面将滚动到顶部。使用[locaton,]的useEffect依赖防止形成滚动时的你的页面组件重新渲染，不是因为位置的变化。