web-dev-qa-db-ja.com

セマンティックUI（React）：Menu.List要素でLinkコンポーネントを使用する方法

私は反応ルータで動作するはずのセマンティックUI（反応）メニューリストを取得しようとしています。つまり、react routerのLinkコンポーネントを使用したいということです。

これを使用すると...

<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>
javascriptreactjsreact-routersemantic-uisemantic-ui-react
22
user3142695

SUIRの augmentation を使用する必要があります。

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

代わりにbrowserHistory.Pushを使用してください。 Linkの代替としてreact-routerによっても提供されましたが、マークアップはありません：

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>

name propsから/profileを取得するには、次のように行を変更します。

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

その場合、<Menu onItemClick={...} >は<Menu.item onClick={...} >よりも優れています

6
Abdennour TOUMI