Javascript 在使用react引导导航链接时使用react滚动（链接）？

我能够使用react引导设置响应导航栏，但当我尝试使用带有Nav.Link的react滚动链接时

<Nav.Link href='projects'>
  <Link 
     activeClass='active'
     to='homepage'
     spy={true}
     smooth={true}
     offset={-70}
     duration= {500}
  >
  Projects
  </Link>
</Nav.Link>

项目

我会在浏览器上看到一个错误，说明

不能作为

的后代出现。我试图将Nav.Link更改为Nav.Item并相应地更改链接样式，但一旦我删除Nav.Link，collapseOnSelect功能将停止在我的移动导航栏中工作

import React from 'react';
import Scroll from 'react-scroll';

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

import { ReactComponent as GithubIcon } from '../../assets/github.svg';
import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';

class Header extends React.Component {

  render() {
    return (
      <div className='header' style={{ fontFamily: 'Fira Code, monospace' }}>
        <Navbar className='shadow-lg' style={{ backgroundColor: '#2C3E50' }} collapseOnSelect expand="lg" fixed="top">
          <Navbar.Brand onSelect={() => Scroll.scrollTo('Homepage', {
            smooth: true,
                offset: -70,
                duration: 500
          })}>
            Name
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
          <Navbar.Collapse id='responsive-navbar-nav'>
            <Nav className='mr-auto'>
              <Nav.Link onSelect={() => Scroll.scrollTo('projects', {
                smooth: true,
                offset: -70,
                duration: 500
              })}>
                Projects
              </Nav.Link>
              <Nav.Link onSelect={() => Scroll.scrollTo('contact', {
                smooth: true,
                offset: -70,
                duration: 500
              })}>
                Contact
              </Nav.Link>
            </Nav>
            <Nav className='ml-auto'>
              <Nav.Link
                href='https://github.com/jgil-r'
                target='_blank'
                rel='noopener noreferrer'
                style={{
                  paddingLeft: '.5rem',
                  paddingRight: '.5rem'
                }}
              >
                <GithubIcon />
              </Nav.Link>
              <Nav.Link
                href='https://twitter.com/chuygil7273'
                target='_blank'
                rel='noopener noreferrer'
                style={{
                  paddingLeft: '.5rem',
                  paddingRight: '.5rem'
                }}
              >
                <TwitterIcon />
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

export default Header;

从“React”导入React；
从“反应卷轴”导入卷轴；
从“react引导/Navbar”导入Navbar；
从“反应引导/Nav”导入Nav；
从“../../assets/github.svg”导入{ReactComponent as GithubIcon}；
从“../../assets/twitter.svg”导入{ReactComponent as TwitterIcon}；
类头扩展了React.Component{
render（）{
返回(
滚动到（'主页'{
平滑：是的，
偏移量：-70，
持续时间：500
})}>
名称
Scroll.Scroll至（'projects'{
平滑：是的，
偏移量：-70，
持续时间：500
})}>
项目
Scroll.Scroll至（'contact'{
平滑：是的，
偏移量：-70，
持续时间：500
})}>
接触
);
}
}
导出默认标题；

从“React”导入React；
导入“./projects.styles.scss”；
const项目=（）=>(
项目
);
导出默认项目；

由于Nav.Link和Link都是呈现给

的组件，因此不能在Nav.Link中包含链接

您可以使用导航链接上的

onSelect

属性添加滚动效果（并从react scroll中删除链接），或将导航链接

设置为
div
属性

从“反应滚动”导入滚动；
// ...
滚动到（'主页'{
平滑：是的，
偏移量：-70，
持续时间：500，
})}
>
解决方案：

import { Link } from "react-scroll";
//...
<Nav className="mr-auto">
       <li className="nav-item">
          <Link
              href="#home"
              to="home"
              activeClass="active"
              className="nav-link"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              >
               Home
              </Link>
       </li>
</Nav>

从“react scroll”导入{Link}；
//...

家

可能太晚了，但希望在这方面苦苦挣扎的其他人能发现这一点很有帮助

对我来说，
Scroll.ScrollTo
不起作用

相反，请尝试导入
滚动条
，并使用滚动条

import { scroller } from "react-scroll";
//...
<Nav.Link
onClick={() => scroller.scrollTo('homepage', {
    smooth: true,
    offset: -70,
    duration: 500,
})}
>

</Nav.Link>


从“react scroll”导入{scroller}；
//...
scroller.scrollTo（'主页'{
平滑：是的，
偏移量：-70，
持续时间：500，
})}
>

注意：我也使用onClick而不是onSelect
我仍然无法设置滚动动画。我已经在头文件顶部编辑了更改。
import { scroller } from "react-scroll";
//...
<Nav.Link
onClick={() => scroller.scrollTo('homepage', {
    smooth: true,
    offset: -70,
    duration: 500,
})}
>

</Nav.Link>