在React.js中使用Bootstrap导航栏实现页面平滑滚动的问题咨询

你当前为Nav.Link添加的smooth、spy等属性是平滑滚动库的专属API，react-bootstrap原生的导航链接组件不识别这些配置，因此无法生效。我们可以通过集成react-scroll库来快速实现需求，步骤如下：

• 第一步：安装依赖
  执行安装命令：npm install react-scroll

• 第二步：修改导航栏组件代码
  核心逻辑是通过react-bootstrap组件的as属性，将react-scroll的Link组件作为导航链接的底层渲染元素，完整修改后的代码如下：

import React, {Component} from 'react';
import {Nav} from 'react-bootstrap';
import {Navbar} from 'react-bootstrap';
import { Link } from 'react-scroll';
import 'bootstrap/dist/css/bootstrap.css';


export default class Navigation extends Component{

render() {

 return(
  <div className="Navigation">   
    <Navbar bg='mywhite' variant='light' sticky='top' expand='sm'>
        <Navbar.Brand className='logo'>
            LOGO
        </Navbar.Brand>
        <Navbar.Toggle/>
        <Navbar.Collapse>
            <Nav>
                <Nav.Link as={Link} activeClass='active' spy={true} smooth={true} offset={-70} duration={500} to='home'>Home</Nav.Link>
                <Nav.Link as={Link} activeClass='active' spy={true} smooth={true} offset={-70} duration={500} to='aboutme'>About me</Nav.Link>
                <Nav.Link as={Link} activeClass='active' spy={true} smooth={true} offset={-70} duration={500} to='skills'>Skills</Nav.Link>
                <Nav.Link as={Link} activeClass='active' spy={true} smooth={true} offset={-70} duration={500} to='projects'>Projects</Nav.Link>
                <Nav.Link as={Link} activeClass='active' spy={true} smooth={true} offset={-70} duration={500} to='motivation'>Motivation</Nav.Link>
            </Nav>
        </Navbar.Collapse>

    </Navbar>
  </div>
)
}
}

• 第三步：给页面内容区块添加对应ID
  你需要在页面对应的内容区块上添加和to属性值一致的id，示例如下：

<div id="home">首页内容</div>
<div id="aboutme">关于我内容</div>
<div id="skills">技能内容</div>
<div id="projects">项目内容</div>
<div id="motivation">愿景内容</div>

补充说明 #

• spy属性开启后，页面滚动到对应区块时，当前导航项会自动添加activeClass指定的类名，你可以自定义active类的样式实现导航高亮效果。
• 你原来配置的offset={-70}是为了避开固定导航栏的高度，避免内容被导航栏遮挡，这个参数可以根据你的导航栏实际高度调整。
• 如果你需要的是跨路由跳转后再定位到对应区块，需要结合你使用的路由库跳转后调用react-scroll的滚动API即可。

内容的提问来源于stack exchange，提问作者harjot.sm