Меню пользовательского интерфейса с использованием маршрутов

Ответ 1

2016 Декабрь Редактировать: linkButton прокрутка устарела, вы получите предупреждение:

Warning: Unknown props `linkButton` on <a> tag.

Поэтому просто удалите опору:

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

Здесь пример Repo и Live Demo Here.

Оригинальный ответ:

Просто хочу отметить, что если вы используете реактивный маршрутизатор, вы можете использовать <Link to="/some/page" />, а не тег <a>.

Для этого вам нужно использовать containerElement prop

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

(={true} может быть опущен, если вы проходите только true,  другими словами, <MenuItem linkButton /> совпадает с <MenuItem linkButton={true} />)

Реквизиты containerElement и linkButton фактически документированы в разделе кнопок, но вы можете использовать его и в MenuItem.

Ответ 2

Вы можете установить linkButtton prop на MenuItem для создания ссылки, а затем добавить href.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />

Ответ 3

Утверждение linkButton of EnhancedButton устарело. LinkButton больше не требуется, если предоставляется свойство href. Он будет удален с помощью v0.16.0.

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

Работает нормально

Ответ 4

Начиная с Material-UI 1.0, новый синтаксис:

<MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile"
>
  Profile
</MenuItem>

(Примечание: в этом примере нет значка. Для этого есть новый компонент ListItemIcon.)

Ответ 5

Ни один из существующих ответов (от сентября 2018 года) не работал для меня с реакцией 16.4.2 и реакцией-маршрутизатором 4.2.2, так что это было мое решение:

<Link to='/notifications' style={{ textDecoration: 'none' }}>
   <MenuItem>Notifications</MenuItem>
</Link>

Как видите, компонент MenuItem окружен компонентом Link, и я добавил стиль textDecoration: None, чтобы элемент не был подчеркнут.

Ответ 6

onTouchTap не работает для меня, я должен использовать onClick см. пример ниже

  <MenuItem 
    onClick={this.logout}
    containerElement={<Link to="/" />}
    primaryText="Sign out"
    rightIcon={
      <b style={style.rightIcon}>
        <img
          className="menu-img"
          src="img/app/logout.png"
          alt="logout"
        />
      </b>
    }
  />

надеюсь, это поможет и другим

Ответ 7

Вот моя реализация, которая выглядит точно так же, как на материале-ui официального сайта. Компонент, который вы можете использовать, включает AppBar, Drawer и ListItem. SelectableList может быть реализован как let SelectableList = MakeSelectable(List).

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>

Ответ 8

Я не мог сделать работу containerElement в Safari в iOS с react-router. Я использую 0.17.2 для пользовательского интерфейса материала и [email protected], и здесь работает работа со мной:

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />