Sémantique UI (React): comment utiliser les composants de lien dans le Menu.Les éléments de liste

j'essaie d'obtenir une liste de menu sémantique ui (react), qui devrait fonctionner avec le routeur react, ce qui veut dire que j'aimerais utiliser le Link composant react router

Si je l'utilise...

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

...il me donne le résultat:

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

Mais je voudrais obtenir quelque chose comme

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

celui-ci ne fonctionne pas, que la syntaxe est fausse:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>
16
demandé sur Alexander Fedyashov 2017-02-07 06:21:38

2 réponses

vous devez utiliser le SUIR augmentation:

<Menu.Item as={ Link } name='profile' to='profile'>
  <Icon name='user' />
  My profile
</Menu.Item>
52
répondu Alexander Fedyashov 2018-10-04 09:36:07

Utiliser browserHistory.push au lieu de cela ; il a été fourni aussi par react-router comme alternative de Link mais non balisage :

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>

Si vous souhaitez obtenir /profilename accessoires , modifiez la ligne par : 

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

Et si oui , <Menu onItemClick={...} > vaut mieux que <Menu.item onClick={...} >

5
répondu Abdennour TOUMI 2017-02-07 03:38:43