点击导航条没有平滑滚动(安装了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>
);