如何使用react router和react scroll在特定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;

这里是首页项目部分的prjects组件。

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

Answer 1

如果 "持续时间 "参数对你来说不是很重要，而你又没有Hooks的问题，我建议你采用如下的解决方案。

• 你去掉滚动组件，在你的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中没有hash，你的页面会滚动到顶部。使用 [locaton,] 作为 useEffect 依赖关系可以防止表单滚动，当你的页面组件不是因为位置变化而重新渲染。

Answer 2

我只是在index.css中添加了这一点。

html {
  scroll-behavior: smooth;
}

而这

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

成为

 <a href="/#projects">Projects</a>

这是如此之快，简单和工作完美的工作