语义UI(React):如何在Menu.List元素中使用Link组件

Question

我正在尝试获得一个语义ui(react)菜单列表,它应该与react路由器一起工作,这意味着我想使用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

你需要使用SUIR的增强:

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

Answer 2

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