基于React Router v4（浏览器端）实现多级标签菜单的技术咨询

核心思路 #

react-router-config 的路由配置本身就是天然的嵌套结构，完美匹配多级菜单的层级关系。我们只需要递归遍历这份配置，根据每个路由项是否包含 routes 子路由数组，来区分它是可跳转的菜单项，还是需要展开的父菜单容器。

步骤1：定义符合要求的路由配置 #

首先你的路由配置要包含菜单所需的关键字段：path（路由路径）、name（菜单显示文本），可选字段 component（对应渲染组件）、routes（子路由数组）。示例配置如下：

const routes = [
  {
    path: '/dashboard',
    name: '仪表盘',
    component: Dashboard,
  },
  {
    path: '/products',
    name: '产品管理',
    routes: [
      {
        path: '/products/list',
        name: '产品列表',
        component: ProductList,
      },
      {
        path: '/products/add',
        name: '新增产品',
        routes: [
          {
            path: '/products/add/basic',
            name: '基础信息',
            component: ProductBasicInfo,
          },
          {
            path: '/products/add/detail',
            name: '详情配置',
            component: ProductDetailConfig,
          },
        ],
      },
    ],
  },
  {
    path: '/settings',
    name: '系统设置',
    component: Settings,
  },
];

步骤2：编写递归渲染的菜单组件 #

我们创建一个可复用的菜单组件，通过递归逻辑自动适配任意层级的路由。下面用原生HTML标签实现基础样式，你也可以直接替换成Ant Design、Element UI等UI库的菜单组件：

import { Link, useLocation } from 'react-router-dom';

// 单个菜单项组件，处理递归逻辑
const MenuItem = ({ route }) => {
  const location = useLocation();
  // 判断当前路由是否激活，用于高亮样式
  const isActive = location.pathname === route.path;

  // 如果有子路由，渲染父菜单+嵌套子菜单
  if (route.routes) {
    return (
      <li className="menu-parent">
        <span className={isActive ? 'active' : ''}>{route.name}</span>
        <ul className="sub-menu">
          {route.routes.map((subRoute) => (
            <MenuItem key={subRoute.path} route={subRoute} />
          ))}
        </ul>
      </li>
    );
  }

  // 无子女路由，渲染可跳转的菜单项
  return (
    <li>
      <Link 
        to={route.path} 
        className={isActive ? 'active' : ''}
      >
        {route.name}
      </Link>
    </li>
  );
};

// 外层菜单容器组件
const MultiLevelMenu = ({ routes }) => {
  return (
    <ul className="main-menu">
      {routes.map((route) => (
        <MenuItem key={route.path} route={route} />
      ))}
    </ul>
  );
};

export default MultiLevelMenu;

步骤3：在应用中整合菜单与路由 #

在根组件中，配合 BrowserRouter 和 react-router-config 的 renderRoutes 方法，完成菜单与路由渲染的整合：

import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import MultiLevelMenu from './MultiLevelMenu';
import routes from './routes';

function App() {
  return (
    <BrowserRouter>
      <div className="app-container">
        {/* 渲染多级菜单 */}
        <MultiLevelMenu routes={routes} />
        <div className="content-area">
          {/* 基于路由配置自动渲染对应组件 */}
          {renderRoutes(routes)}
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

关键细节补充 #

• 菜单高亮：通过 useLocation 获取当前页面路径，与路由项的 path 对比，给激活项添加样式类。
• 递归适配：不管你的路由有多少层级，MenuItem 的递归逻辑都会自动处理，无需修改代码。
• 路由渲染：renderRoutes 方法能直接解析嵌套路由配置，省去手动编写多层 Switch 和 Route 的麻烦。

如果使用UI库的菜单组件，只需要把原生HTML标签替换成对应组件即可，核心的递归遍历逻辑完全通用。

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