React中基于NavLink实现导航子菜单的方法咨询

嘿，作为React新手想要搞定层级子菜单完全没问题，我结合你现有的react-router-dom和Material-UI组件代码，一步步帮你实现需求：

步骤1：创建可折叠的子菜单组件 #

首先我们需要一个能控制展开/收起的子菜单组件，用React的useState来管理折叠状态：

import { useState } from 'react';
import { List, ListItem, ListItemIcon, ListItemText, Collapse } from '@mui/material';
import { NavLink } from 'react-router-dom';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';

const CollapsibleSubMenu = ({ title, subItems }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <ListItem button onClick={handleToggle}>
        <ListItemIcon>
          {/* 这里可以添加Report相关的图标，比如BarChart之类的 */}
        </ListItemIcon>
        <ListItemText primary={title} />
        {isOpen ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={isOpen} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {subItems.map((item) => (
            <NavLink 
              key={item.path} 
              to={item.path} 
              style={({ isActive }) => ({
                textDecoration: 'none',
                color: isActive ? '#1976d2' : 'inherit',
                paddingLeft: '32px' // 子菜单缩进，贴合Material-UI风格
              })}
            >
              <ListItem button>
                <ListItemIcon>
                  {/* 子菜单图标按需添加 */}
                </ListItemIcon>
                <ListItemText primary={item.label} />
              </ListItem>
            </NavLink>
          ))}
        </List>
      </Collapse>
    </>
  );
};

export default CollapsibleSubMenu;

步骤2：修改你的mainListItems导航列表 #

把原来的Report项替换成我们的子菜单组件，传入层级结构的子项：

import CollapsibleSubMenu from './CollapsibleSubMenu'; // 注意路径要和你的文件结构匹配

export const mainListItems = (
  <List>
    <NavLink 
      to="dashboard"
      style={({ isActive }) => ({
        textDecoration: 'none',
        color: isActive ? '#1976d2' : 'inherit'
      })}
    >
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>
    </NavLink>
    <NavLink 
      to="userform"
      style={({ isActive }) => ({
        textDecoration: 'none',
        color: isActive ? '#1976d2' : 'inherit'
      })}
    >
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Registration" />
      </ListItem>
    </NavLink>
    {/* 替换原来的Report项为层级子菜单 */}
    <CollapsibleSubMenu 
      title="Report"
      subItems={[
        {
          label: "My report",
          path: "my-report"
        },
        {
          label: "MIS report",
          path: "mis-report"
        }
      ]}
    />
  </List>
);

步骤3：更新App.js中的路由配置 #

添加子菜单对应的路由路径，确保点击后能正确跳转：

// 记得先创建MyReport和MisReport组件哦
import MyReport from './MyReport';
import MisReport from './MisReport';

const App = () => (
  <HashRouter>
    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/userform" component={UserForm} />
      <Route path="/dashboard" component={Dashboard} />
      {/* 新增子菜单对应的路由 */}
      <Route path="/my-report" component={MyReport} />
      <Route path="/mis-report" component={MisReport} />
      <Redirect from="/" to="signin" />
    </Switch>
  </HashRouter>
);

额外注意点 #

• 确保你已经安装了Material-UI图标包：npm install @mui/icons-material
• 如果需要更个性化的激活样式，可以自定义NavLink的style，或者用Material-UI的styled组件封装
• 子菜单的paddingLeft: '32px'是Material-UI的默认层级缩进，你可以根据需求调整数值
• 如果想要默认展开子菜单，只需要把useState(false)改成useState(true)

这样你就能实现点击Report展开子菜单，点击My report或MIS report跳转对应页面的功能啦～

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