点击导航栏不平滑滚动(已安装react-scroll)

Question

这个react-scroll我做错了什么？我想单击导航栏链接，然后平滑地滚动到同一页上的相应部分。但是，单击导航项目不会执行任何操作。有没有人能帮我解释一下为什么这个不起作用？

我运行了npm install react-scroll。

App.js

import './App.css';
import React from 'react';

import Navbar from './components/Navbar/Navbar';
import About from './components/About/About';
import Skills from './components/Skills/Skills';

function App() {
  return (
    <React.Fragment>
      <header>
        <Navbar />
      </header>
      <main>
        <About id='about' />
        <Skills id='skills' />
      </main>
    </React.Fragment>
  );
}

export default App;

Navbar.js

import { Link as LinkScroll } from 'react-scroll';

const Navbar = () => {
  return (
    <nav> 
      <LinkScroll
        activeClass='active'
        to='about'
        spy={true}
        smooth={true}
        offset={-70}
        duration={500}
      >
        About
      </LinkScroll>
      <LinkScroll
        activeClass='active'
        to='skills'
        spy={true}
        smooth={true}
        offset={-70}
        duration={500}
      >
        Skills
      </LinkScroll>
    </nav>
  );
};

export default Navbar;

Answer 1

从元件标记中删除id：

<main>
    <About />
    <Skills />
</main>

然后在这些组件的根选项卡中添加这些id。假设您的组件是：

import React from "react";

export default ({ name }) => (
  <div id="skills" style={{ height: "500px" }}>
    <h1>Hello {name}!</h1>
  </div>
);