单击 Navbar 不是平滑滚动（已安装 react-scroll）

Question

这个反应滚动条我做错了什么？我想单击导航栏 link 并平滑滚动到同一页面上的相应部分。但是，单击导航项不会执行任何操作。有人可以帮我解决为什么这不起作用吗？

我运行 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>
);

单击 Navbar 不是平滑滚动（已安装 react-scroll）

Clicking on Navbar not Smooth Scrolling (installed react-scroll)

javascript

css

single-page-application

reactjs

react-scroll