如何在 Menu.List 个元素中使用 Link 个组件

Question

我正在尝试获取语义 ui（反应）菜单列表，它应该与反应路由器一起使用，这意味着我想使用 [=17] 的 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>

Answer 1

改用browserHistory.push；它也由 react-router 提供，作为 Link 的替代，但 non-markup :

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={...} >

Answer 2

您需要使用 SUIR 的 augmentation:

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

如何在 Menu.List 个元素中使用 Link 个组件

How to use Link components in Menu.List elements

javascript

reactjs

semantic-ui

react-router

semantic-ui-react