使用react-scroll实现单页应用下拉菜单导航后菜单不关闭问题

问题本质是：移动端下拉菜单展开后，点击react-scroll的Link组件仅会触发滚动行为，不会触发菜单关闭逻辑。我们需要在点击导航链接时，同时执行关闭菜单的操作。

解决方案：给导航链接添加关闭菜单的点击事件 #

修改Navbar组件，新增专门的菜单关闭函数，并绑定到每个Link的点击事件上：

修改后的Navbar代码

import { useRef } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { faBars, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
import "./Navbar.css";
import {Link} from 'react-scroll';

function Navbar() {
    const navRef = useRef();

    const showNavbar = () => {
        navRef.current.classList.toggle("responsive_nav");
    };

    // 仅执行菜单关闭操作，避免toggle带来的意外展开
    const closeNavbar = () => {
        navRef.current.classList.remove("responsive_nav");
    };

    return (
        <header>
            <nav ref={navRef}>  
                <Link 
                    to="home" 
                    spy={true} 
                    smooth={true} 
                    offset={-100} 
                    duration={500}
                    onClick={closeNavbar}
                >Home</Link>
                <Link 
                    to="about" 
                    spy={true} 
                    smooth={true} 
                    offset={-100} 
                    duration={500}
                    onClick={closeNavbar}
                >About me</Link>
                <Link 
                    to="mywork" 
                    spy={true} 
                    smooth={true} 
                    offset={-100} 
                    duration={500}
                    onClick={closeNavbar}
                >My Work</Link>
                <Link 
                    to="contact" 
                    spy={true} 
                    smooth={true} 
                    offset={-150} 
                    duration={500}
                    onClick={closeNavbar}
                >Contact</Link>
                <button
                    className="nav-btn nav-close-btn"
                    onClick={showNavbar}>
                    <FontAwesomeIcon icon={faCircleXmark} style={{color: "#FFB30D",}} />
                </button>
            </nav>
            <button
                className="nav-btn nav-open"
                onClick={showNavbar}>
                <FontAwesomeIcon icon={faBars} style={{color: "#FFB30D",}}/>
            </button>
        </header>
    );
}

export default Navbar;

逻辑说明 #

• 新增closeNavbar函数，直接移除控制菜单展开的responsive_nav类，确保点击链接后菜单只会关闭，不会出现意外展开的情况。
• 给每个导航Link绑定onClick={closeNavbar}，让点击导航链接的同时触发菜单关闭操作。

优化方案：封装自定义滚动链接组件 #

如果导航链接数量较多，可封装一个带关闭逻辑的自定义ScrollLink组件，减少重复代码：

const ScrollLink = ({ to, offset = -100, children }) => {
    const closeNavbar = () => {
        navRef.current.classList.remove("responsive_nav");
    };

    return (
        <Link 
            to={to} 
            spy={true} 
            smooth={true} 
            offset={offset} 
            duration={500}
            onClick={closeNavbar}
        >
            {children}
        </Link>
    );
};

在Navbar中使用该组件：

<ScrollLink to="home">Home</ScrollLink>
<ScrollLink to="about">About me</ScrollLink>
<ScrollLink to="mywork">My Work</ScrollLink>
<ScrollLink to="contact" offset={-150}>Contact</ScrollLink>

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