react-scroll链接呈现为文本且不可单击-平滑滚动不起作用

Question

我正在跟随在线教程学习如何使用react-scroll，但是我似乎不能让它为我工作。

我使用了react-scroll中的Link标签，并将' to‘属性设置为我想要滚动到的div的id。但当我查看实时代码时，链接呈现为文本，并且看起来不可点击。

import { Link } from "react-scroll";

const OpenBlurb = () => {
  return (
    <div className="blurb-container">
      <h1>Welcome</h1>
      <Link to="projects" smooth={true} duration={500} offset={50}> My Projects </Link>
    </div>
  );
};

export default OpenBlurb;

我希望‘我的项目’链接平滑地向下滚动页面到另一个组件与id‘项目’

const SecondSection = () => {
  return (
    <div className="second-container" id="projects" >
      <h2>My Projects</h2>

    </div>
  );
};

export default SecondSection;

有没有人看到我做错了什么？

Answer 1

我猜“项目”不会被识别为ID。

你试过使用to="#projects“吗？

看看这些，它们可能会有所帮助：

How to scroll to an element?

react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link