web-dev-qa-db-fra.com

UI sémantique (React): Comment utiliser les composants Link dans les éléments Menu.List

J'essaie d'obtenir une liste de menu sémantique ui (react), qui devrait fonctionner avec le routeur react, ce qui signifie que je voudrais utiliser le composant Link de react router

Si j'utilise ceci ...

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

... ça 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, car la syntaxe est incorrecte:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>
javascriptreactjsreact-routersemantic-uisemantic-ui-react
22
user3142695

Vous devez utiliser le SUIR's augmentation :

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

Utilisation browserHistory.Push au lieu ; Il a également été fourni par react-router comme alternative à Link mais sans 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 voulez obtenir /profile à partir de name accessoires, changez la ligne en:

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

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

6
Abdennour TOUMI