Question

我试图获得一个语义ui（react）菜单列表，该列表应该与react路由器一起使用，这意味着我想使用Link的{{1}}组件

如果我用这个......

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>

Answer 1

您需要使用SUIR＆＃39; augmentation：

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

语义UI（React）：如何在Menu.List元素

2 个答案: