Semantic UI (React): как использовать компоненты ссылок в меню.Элемент списка

Я пытаюсь получить семантический список меню ui (react), который должен работать с маршрутизатором react, что означает, что я хотел бы использовать Link компонент react router

если я использую это...

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

...это дает мне результат:

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

но я хотел бы сделать что-то вроде

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

это не работает, так как синтаксис неправильный:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>
16
javascript react-router reactjs semantic-ui semantic-ui-react

2 ответов

вам нужно воспользоваться СУИР-х увеличение:

<Menu.Item as={ Link } name='profile' to='profile'>
  <Icon name='user' />
  My profile
</Menu.Item>
52

использовать browserHistory.push вместо этого ; это было предусмотрено и react-router в качестве альтернативы Link но не разметки :

import {browserHistory} from 'react-router';

redirect(to) {
    browserHistory.push({
       pathname: to
    });
} 
//......
<Menu.Item name="profile" onClick={this.redirect('/profile')}
    <Icon name='user' />
    My profile
</Menu.Item>

если вы хотите получить /profile С name реквизит, измените строку на:

<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}

и если это так , <Menu onItemClick={...} > лучше, чем <Menu.item onClick={...} >

5