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

Question

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

我想要的是这样的报告 > 我的报告> 管理信息系统报告

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