React导航栏平滑滚动失效求助：已安装react-scroll仍无法实现

问题核心 #

你当前代码仍在使用原生<a>标签，未调用react-scroll提供的API或组件，这是平滑滚动不生效的关键原因。以下是具体修复步骤和代码示例：

修复步骤 #

1. 确认依赖安装正确 #

确保已完成react-scroll的安装：

npm install react-scroll --save
# 或
yarn add react-scroll

2. 用react-scroll的Link组件替换原生a标签 #

修改你的Banner组件，导入react-scroll的Link组件并替换导航内的锚点链接：

import React from 'react'
import Icon from './svg'
// 导入react-scroll的Link组件
import { Link } from 'react-scroll'

export default function Banner() {
    return (
        <React.Fragment> 
            <header className="header-section two">
                <div className="header">
                    <div className="header-bottom-area">
                        <div className="container custom-container">
                            <div className="header-menu-content">
                                <nav className="navbar navbar-expand-xl p-0">
                                    <a className="site-logo site-title" href="/"><img src="./assets/images/logo.png" width="63%" alt="giga-logo"/></a>
                                    <button className="navbar-toggler d-block d-xl-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span className="toggle-bar"></span>
                                    </button>
                                    <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                                        <ul className="navbar-nav main-menu" id="nav-list">
                                            {/* 内部锚点使用react-scroll的Link组件，配置平滑滚动参数 */}
                                            <li>
                                                <Link 
                                                    to="about" 
                                                    smooth={true} 
                                                    duration={500}
                                                    className="nav-link"
                                                >
                                                    About us
                                                </Link>
                                            </li>
                                            {/* 外部页面跳转保留原生a标签 */}
                                            <li><a href="/plan">Plans</a></li>
                                            <li className="menu_has_children">
                                                <a href="#0">Business<i className="las la-angle-down"></i></a>
                                                <ul className="sub-menu">
                                                    <li><a href="service.html">Leased Lines</a></li>
                                                    <li><a href="service-details.html">Corporate Solutions</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <Link 
                                                    to="resellers" 
                                                    smooth={true} 
                                                    duration={500}
                                                    className="nav-link"
                                                >
                                                    Resellers
                                                </Link>
                                            </li>
                                            <li><a href="blog.html">News</a></li>
                                            <li><a href="contact.html">Contact us</a></li>
                                            <p className="btn--base"><a href="my-login-portal">Login</a></p> 
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </React.Fragment>
    )
}

3. 确保目标元素存在对应ID #

页面中对应锚点的内容区块必须设置匹配的id，比如「About us」对应的区块：

// 示例：About内容区块的结构
<section id="about">
    {/* 你的About模块内容 */}
</section>

4. 备选方案：自定义Hook控制滚动 #

如果偏好通过Hook实现，可以导入animateScroll编写点击事件：

import { animateScroll as scroll } from 'react-scroll'

// 定义滚动函数
const scrollToSection = (sectionId) => {
    const targetElement = document.getElementById(sectionId)
    scroll.scrollToElement(targetElement, { 
        duration: 500, 
        smooth: true 
    })
}

// 导航中使用方式
<li>
    <a onClick={() => scrollToSection('about')} href="#about">About us</a>
</li>

注意事项 #

• 目标元素的id必须与Link组件的to属性完全匹配（区分大小写）
• React Router路由跳转仍用原生<a>标签，仅内部锚点使用react-scroll组件
• 避免同时设置body的scroll-behavior: smooth，可能与react-scroll的平滑效果冲突

内容的提问来源于stack exchange，提问作者Awidan