react 侧边栏路由实现

使用 React Router 实现侧边栏路由

安装 React Router 依赖包

npm install react-router-dom

创建基础路由结构

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app">
        <Sidebar />
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </Router>
  );
}

创建可折叠侧边栏组件

侧边栏基础结构

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

function Sidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? '>' : '<'}
      </button>
      <nav>
        <ul>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
          <li>
            <Link to="/settings">Settings</Link>
          </li>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

添加嵌套路由支持

配置嵌套路由结构

function App() {
  return (
    <Router>
      <div className="app">
        <Sidebar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/user/*" element={<UserLayout />} />
        </Routes>
      </div>
    </Router>
  );
}

function UserLayout() {
  return (
    <div className="user-layout">
      <Routes>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

实现动态高亮当前路由

使用 NavLink 实现自动高亮

import { NavLink } from 'react-router-dom';

function Sidebar() {
  return (
    <div className="sidebar">
      <nav>
        <ul>
          <li>
            <NavLink 
              to="/dashboard"
              className={({ isActive }) => isActive ? 'active' : ''}
            >
              Dashboard
            </NavLink>
          </li>
        </ul>
      </nav>
    </div>
  );
}

响应式侧边栏实现

添加媒体查询和状态控制

function Sidebar() {
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  return (
    <>
      <button 
        className="mobile-toggle"
        onClick={() => setIsMobileOpen(!isMobileOpen)}
      >
        Menu
      </button>
      <div className={`sidebar ${isMobileOpen ? 'open' : ''}`}>
        {/* 侧边栏内容 */}
      </div>
    </>
  );
}

配套 CSS 示例

.sidebar {
  width: 250px;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -250px;
  }
  .sidebar.open {
    left: 0;
  }
}

使用图标库增强侧边栏

安装图标库

npm install react-icons

集成图标到侧边栏

import { FaHome, FaCog, FaUser } from 'react-icons/fa';

function Sidebar() {
  return (
    <div className="sidebar">
      <nav>
        <ul>
          <li>
            <NavLink to="/dashboard">
              <FaHome /> Dashboard
            </NavLink>
          </li>
        </ul>
      </nav>
    </div>
  );
}