ReactJS响应式导航栏汉堡菜单点击后跳转空白页问题求助

问题根因 #

你代码里的核心逻辑错误导致空白页：

• 你在showMenu为true时直接返回了通过document.querySelector获取的原生DOM对象，React组件不允许直接返回原生DOM节点，且这个逻辑会导致导航栏的logo、头像、汉堡按钮等其他元素全部不渲染，自然就会出现空白内容。
• 你不需要手动操作DOM获取导航菜单节点，React中通过状态动态控制元素类名即可实现菜单显示隐藏的效果，你的CSS已经提前写好了.nav-menu.active的显示样式，直接用状态控制类名即可。

修正后的React组件代码 #

import React, {useState} from 'react'
import './navbar.css'
import ProfileIcon from '../../assets/profileIcon.svg'

function Navbar() {
    const [showMenu, setShowMenu] = useState(false)

    return (
        <nav className="navbar">
            {/* logo */}
            <a href="#" className="nav-logo nav-a">Logo</a>

            {/* navbar buttons：动态加active类控制显示 */}
            <ul className={`nav-menu ${showMenu ? 'active' : ''}`}>
                <li className="nav-item nav-li">
                    <a href="#" className="nav-link nav-a">Components</a>
                </li>
                <li className="nav-item nav-li">
                    <a href="#" className="nav-link nav-a">Articles</a>
                </li>
                <li className="nav-item nav-li">
                    <a href="#" className="nav-link nav-a">About</a>
                </li>
            </ul>

            <img src={ ProfileIcon } className="profile-icon" alt="profile-icon"></img>

            {/* hamburger menu：加active类控制汉堡图标动画 */}
            <div className={`hamburger ${showMenu ? 'active' : ''}`} onClick={() => setShowMenu(!showMenu)}>
                <span className="bar"></span>
                <span className="bar"></span>
                <span className="bar"></span>
            </div>

        </nav>
    )
}

export default Navbar

其他说明 #

你的CSS代码不需要做任何修改，就能直接实现移动端响应式汉堡菜单的效果，包括点击后菜单滑入、汉堡图标变叉号的动画都可以正常生效。

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