Как сделать подменю для навигационной ссылки?

Привет, я новичок в реакции и хотел добавить подменю в свое меню.

Я хотел получить что-то вроде этого отчета ›Мой отчет› Отчет MIS

Я импортирую и использую 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>
);
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 источник

Ответы (1)


arrow_upward
1
arrow_downward

Чао, для вложенной навигации вы можете использовать компоненты ListItem и Collapse из пользовательского интерфейса материала следующим образом:

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

Здесь пример codeandbox с использованием компонента класса.

person Giovanni Esposito    schedule 30.08.2020
comment
Привет, Джованни! Еще раз спасибо, но не могли бы вы предоставить песочницу для данного кода? Если не так уж много спросить? - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan Я сделал это :) Здесь codeandbox.io/ s / material-demo-forked-4s2db? file = / demo.js. - person Giovanni Esposito; 30.08.2020
comment
Привет, Джованни, еще раз спасибо, но когда я пытаюсь импортировать его, он ничего не дает - person sandeep pradhan; 30.08.2020
comment
Я экспортирую и импортирую значок const, значит, в этом проблема? - person sandeep pradhan; 30.08.2020
comment
Чтобы применить мой код к вашему, просто необходимо заменить ваш ListItem моим ListItem (сохранив NavLink). Еще одна вещь: я не знаю, какой значок вы импортируете, но, согласно вашему коду, вы не вставляете никаких значков в ListItemIcon. Попробуйте сделать что-то вроде: <ListItemIcon><StarBorder /></ListItemIcon>, и вы увидите значок звездочки рядом с ListItem - person Giovanni Esposito; 30.08.2020
comment
Тот, который вы правильно указали в ответе, а не в песочнице? - person sandeep pradhan; 30.08.2020
comment
где я помещаю константы и функции в песочницу - person sandeep pradhan; 30.08.2020
comment
Я также не могу поместить this.state в предоставленную функцию const - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan сложно ответить, не увидев своего кода. У вас есть репозиторий на github, которым можно поделиться? - person Giovanni Esposito; 30.08.2020
comment
Да я создаю репо - person sandeep pradhan; 30.08.2020
comment
Привет, Джованни, нет, у меня нет других предложений по репо? - person sandeep pradhan; 30.08.2020
comment
@sandeeppradhan, вы можете создать codeandbox с важной частью (навигация, часть вашего кода, которая не работает) и объяснить с некоторыми комментариями, где вы хотите вложенную навигацию. - person Giovanni Esposito; 30.08.2020