如何为导航链接制作子菜单？

Question

您好，我是新手，想在我的菜单中实现子菜单。

我想要的是这样的报告 > 我的报告 > MIS 报告

我正在从 react 路由器 dom 导入和使用 NavLink。

菜单目前看起来像这样，没有子菜单：

这是我使用导航栏链接的代码：

export const mainListItems = (
  <List>
    <NavLink to="dashboard">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>
    </NavLink>
    <NavLink to="userform">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Registration" />
      </ListItem>
    </NavLink>
    <NavLink to="">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Report" />
      </ListItem>
    </NavLink>
  </List>
);
This is the link in my App.js

const App = () => (
  <HashRouter>
    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/userform" component={UserForm} />
      <Route path="/dashboard" component={Dashboard} />

      <Redirect from="/" to="signin" />
    </Switch>
  </HashRouter>
);
I need some direction in this. How do I implement my own sub menus

Answer 1

Ciao，对于嵌套导航，您可以使用 Material UI 中的 ListItem 和 Collapse 组件，如下所示：

       <ListItem button onClick={this.handleClick}>  // Report level
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Report" />
          {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>  //first nested level
          <List component="div" disablePadding>
            <ListItem
              button
              style={styles.nested}
              onClick={this.handleClickSecondLevel}
            >
              <ListItemIcon>
                <StarBorder />
              </ListItemIcon>
              <ListItemText primary="My Report" />
              {openSecondLevel ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openSecondLevel} timeout="auto" unmountOnExit>  // second nested level
              <List component="div" disablePadding>
                <ListItem button style={styles.nestedSecondLevel}>
                  <ListItemIcon>
                    <StarBorder />
                  </ListItemIcon>
                  <ListItemText primary="MIS Report" />
                </ListItem>
              </List>
            </Collapse>
          </List>
        </Collapse>

Here 使用类组件的代码框示例。