Material ui 中导航栏链接中的子菜单

Question

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

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

我正在从 React router 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

您可以使用嵌套列表项，并且可以在此处找到类似的示例。