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

Question

Я пытаюсь получить список меню семантических ui (реагировать), который должен работать с реагирующим маршрутизатором, что означает, что я хотел бы использовать 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> 

Answer 1

Использование 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={...} >

Answer 2

Вы должны использовать Шура-х augmentation:

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