ReactJS移动端侧边栏折叠失效及点击链接收起问题解决方案

一、修复移动端侧边栏折叠功能 #

原代码未根据open状态给侧边栏容器添加/移除折叠控制类，导致折叠逻辑失效。Admin模板通常依赖特定类名（如menu-collapsed）控制侧边栏展开/折叠，需将状态与容器className绑定：

修改侧边栏容器的className，根据open值动态切换类：

<div className={`main-menu menu-fixed menu-light menu-accordion menu-shadow ${!open ? 'menu-collapsed' : ''}`} data-scroll-to-active="true" data-img="theme-assets/images/backgrounds/02.jpg">

注：若你的模板折叠类不是menu-collapsed，请替换为模板文档指定的对应类名。

二、实现点击Link后自动收起侧边栏 #

给侧边栏内所有Link组件添加点击事件，触发侧边栏收起逻辑：

1. 封装统一的点击处理函数（可选添加移动端判断，桌面端可保留展开状态）：

const handleLinkClick = () => {
  // 仅移动端点击后收起，桌面端维持当前状态
  if (window.innerWidth < 768) {
    setOpen(false);
  }
};

2. 给每个Link绑定该处理函数：

<li className="active"><Link to="/" onClick={handleLinkClick}><i className="ft-home"></i><span className="menu-title" data-i18n="">Dashboard</span></Link></li>
<li className=" nav-item"><Link to="/to-do-list" onClick={handleLinkClick}><i className="ft-pie-chart"></i><span className="menu-title" data-i18n="">Tasks</span></Link></li>
<li className=" nav-item"><Link to="/" onClick={handleLinkClick}><i className="la la-sign-out"></i><span className="menu-title" data-i18n="">Logout</span></Link></li>

修改后的完整代码 #

import { useState } from 'react';
import { Link } from 'react-router-dom'

const SideBar = () => {
  const [open, setOpen] = useState(true);

  const onOpen = () => {
    setOpen(!open);
  };

  const handleLinkClick = () => {
    // 移动端自动收起，桌面端可保留展开状态（可根据需求删除判断）
    if (window.innerWidth < 768) {
      setOpen(false);
    }
  };

  return (
    <div className={`main-menu menu-fixed menu-light menu-accordion menu-shadow ${!open ? 'menu-collapsed' : ''}`} data-scroll-to-active="true" data-img="theme-assets/images/backgrounds/02.jpg">
      <div className="navbar-header">
        <ul className="nav navbar-nav flex-row">       
          <li className="nav-item mr-auto">
            <Link to="/" className="navbar-brand" onClick={onOpen}>
                <img className="brand-logo" alt="Chameleon admin logo" src="theme-assets/images/logo/logo.png"/>
                <h3 className="brand-text">LaravelTricks</h3>
            </Link>
          </li>
        </ul>
      </div>
      <div className="main-menu-content">
        <ul className="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
          <li className="active"><Link to="/" onClick={handleLinkClick}><i className="ft-home"></i><span className="menu-title" data-i18n="">Dashboard</span></Link></li>
          <li className=" nav-item"><Link to="/to-do-list" onClick={handleLinkClick}><i className="ft-pie-chart"></i><span className="menu-title" data-i18n="">Tasks</span></Link></li>
          <li className=" nav-item"><Link to="/" onClick={handleLinkClick}><i className="la la-sign-out"></i><span className="menu-title" data-i18n="">Logout</span></Link></li>
        </ul>
      </div>
      <div className="navigation-background"></div>
    </div>
  ); 
};
export default SideBar;

额外说明 #

• 若模板折叠类名与示例不同，需查看模板CSS或文档替换对应类名。
• 若希望桌面端点击Link后也收起侧边栏，直接删除handleLinkClick中的窗口宽度判断，仅保留setOpen(false)即可。

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