材质ui中导航栏链接中的子菜单

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>
);

这是我的 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>
);

我需要一些指导。如何实现我自己的子菜单

Answer 1

你可以使用Nested List Items，你可以找到一个类似的例子here。