React Router 4：不同布局下Link与Route的使用问题

嘿，作为React新手用AdminLTE做侧边栏导航切换内容完全没问题，我给你两种实用的方案，你可以根据自己的项目复杂度来选择～

方案一：用React状态管理（适合简单内容切换） #

这种方式不需要额外依赖，靠React的useState跟踪当前选中的菜单项，然后渲染对应的内容组件，非常适合小型项目。

步骤1：定义菜单数据和内容组件 #

先把侧边栏的菜单项和对应的内容组件整理成数据，方便后续统一渲染：

// 定义各个内容组件
const Dashboard = () => <div>这是仪表盘的内容区域</div>;
const QuickExample = () => <div>这里可以放你原来的Quick Example相关内容</div>;
const Settings = () => <div>这是设置页面的内容</div>;

// 菜单数据数组，关联ID、名称和对应组件
const menuItems = [
  { id: 'dashboard', name: 'Dashboard', component: <Dashboard /> },
  { id: 'quickExample', name: 'Quick Example', component: <QuickExample /> },
  { id: 'settings', name: 'Settings', component: <Settings /> },
];

步骤2：编写主组件逻辑 #

在主组件里用useState跟踪激活的菜单项，渲染侧边栏和对应内容：

import { useState } from 'react';

function App() {
  // 默认选中Quick Example，和你原来的内容区域对应
  const [activeMenuItem, setActiveMenuItem] = useState('quickExample');

  return (
    <div className="wrapper">
      {/* AdminLTE侧边栏部分 */}
      <aside className="main-sidebar">
        <section className="sidebar">
          <ul className="sidebar-menu tree" id="menu">
            {menuItems.map(item => (
              <li 
                key={item.id}
                {/* 给激活的菜单项加上AdminLTE的active类，自动高亮 */}
                className={activeMenuItem === item.id ? 'active' : ''}
                {/* 点击菜单项时更新激活状态 */}
                onClick={() => setActiveMenuItem(item.id)}
              >
                <a href="#">{item.name}</a>
              </li>
            ))}
          </ul>
        </section>
      </aside>

      {/* 内容区域 */}
      <div className="content-wrapper">
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <div className="box box-primary">
                <div className="box-header with-border">
                  {/* 动态显示当前页面的标题 */}
                  <h3 className="box-title">
                    {menuItems.find(item => item.id === activeMenuItem)?.name}
                  </h3>
                </div>
                <div id="master">
                  {/* 渲染当前选中的内容组件 */}
                  {menuItems.find(item => item.id === activeMenuItem)?.component}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

关键点说明 #

• 用useState保存当前激活的菜单项ID，点击菜单项时更新这个状态。
• 给激活的菜单项添加active类，AdminLTE会自动应用高亮样式，符合框架的UI规范。
• 根据当前激活的ID，从菜单数据中找到对应的组件渲染到#master区域。

方案二：用React Router（适合复杂多页面路由） #

如果你的项目有更多页面，或者需要URL地址跟着导航变化，推荐用React Router来实现，更符合单页应用的路由规范。

步骤1：安装React Router #

首先安装依赖：

npm install react-router-dom

步骤2：编写带路由的组件 #

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

// 定义内容组件
const Dashboard = () => <div>这是仪表盘的内容区域</div>;
const QuickExample = () => <div>这里可以放你原来的Quick Example相关内容</div>;
const Settings = () => <div>这是设置页面的内容</div>;

function App() {
  return (
    <Router>
      <div className="wrapper">
        {/* 侧边栏部分，用Link替代普通a标签实现无刷新跳转 */}
        <aside className="main-sidebar">
          <section className="sidebar">
            <ul className="sidebar-menu tree" id="menu">
              <li>
                <Link to="/dashboard">Dashboard</Link>
              </li>
              <li>
                <Link to="/quick-example">Quick Example</Link>
              </li>
              <li>
                <Link to="/settings">Settings</Link>
              </li>
            </ul>
          </section>
        </aside>

        {/* 内容区域，用Routes和Route匹配渲染组件 */}
        <div className="content-wrapper">
          <div className="container">
            <div className="row">
              <div className="col-md-6">
                <div className="box box-primary">
                  <div className="box-header with-border">
                    <h3 className="box-title">页面内容</h3>
                  </div>
                  <div id="master">
                    <Routes>
                      {/* 匹配各个路由对应的组件 */}
                      <Route path="/dashboard" element={<Dashboard />} />
                      <Route path="/quick-example" element={<QuickExample />} />
                      <Route path="/settings" element={<Settings />} />
                      {/* 默认路由，打开页面时显示Quick Example */}
                      <Route index element={<QuickExample />} />
                    </Routes>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

关键点说明 #

• 用Link组件替代普通的<a>标签，实现无刷新跳转，避免页面重载。
• Routes和Route负责匹配URL和对应的组件，URL会跟着导航变化，方便用户收藏或分享页面。
• 可以轻松扩展更多路由，适合中大型项目的复杂页面场景。

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