Bagaimana cara membuat sub menu untuk tautan nav?

Hai, saya baru bereaksi dan ingin menerapkan submenu ke menu saya.

Yang saya inginkan adalah sesuatu seperti ini Laporan › Laporan saya › Laporan MIS

Saya mengimpor dan menggunakan NavLink dari dom router reaksi.

Menu saat ini terlihat seperti ini tanpa submenu:

Ini adalah kode tempat saya menggunakan tautan bilah navigasi:

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

reactjs material-ui react-router-dom react-router
person sandeep pradhan    schedule 30.08.2020    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Ciao, untuk navigasi bersarang Anda bisa menggunakan komponen ListItem dan Collapse dari Material UI seperti ini:

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

Berikut contoh kodeandbox menggunakan komponen kelas.

person Giovanni Esposito    schedule 30.08.2020
comment
Hai Giovanni, Sekali lagi terima kasih, tetapi bisakah Anda memberikan kotak pasir untuk kode yang diberikan? Jika tidak terlalu banyak bertanya? - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan Saya berhasil :) Ada di sini codesandbox.io/ s/material-demo-forked-4s2db?file=/demo.js - person Giovanni Esposito; 30.08.2020
comment
Hai Giovanni terima kasih sekali lagi tetapi ketika saya mencoba mengimpornya tidak menghasilkan apa-apa - person sandeep pradhan; 30.08.2020
comment
Saya mengekspor dan mengimpor ikon const jadi ada masalah di sana? - person sandeep pradhan; 30.08.2020
comment
Untuk menerapkan kode saya pada kode Anda, Anda hanya perlu mengganti ListItem Anda dengan ListItem saya (dengan menyimpan NavLink). Hal lain: Saya tidak tahu ikon apa yang Anda impor tetapi menurut kode Anda, Anda tidak memasukkan ikon apa pun ke ListItemIcon. Coba lakukan sesuatu seperti: <ListItemIcon><StarBorder /></ListItemIcon> dan Anda akan melihat ikon bintang di dekat ListItem - person Giovanni Esposito; 30.08.2020
comment
Yang Anda berikan di jawaban kan, bukan di kotak pasir? - person sandeep pradhan; 30.08.2020
comment
di mana saya meletakkan consts dan fungsinya di kotak pasir - person sandeep pradhan; 30.08.2020
comment
Saya juga tidak bisa memasukkan this.state ke dalam fungsi const yang disediakan - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan sulit menjawab tanpa melihat kode Anda. Apakah Anda memiliki repo github untuk dibagikan? - person Giovanni Esposito; 30.08.2020
comment
Ya, saya sedang membuat repo - person sandeep pradhan; 30.08.2020
comment
Hai Giovanni, tidak, saya tidak punya saran lain untuk reponya? - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan Anda dapat membuat kotak kode dengan bagian penting (navigasi, bagian kode Anda yang tidak berfungsi) dan jelaskan dengan beberapa komentar di mana Anda ingin navigasi bersarang. - person Giovanni Esposito; 30.08.2020