材质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

您可以使用Nested List Items，并找到类似的示例here。