Javascript 语义 UI (React)：如何在 Menu.List 元素中使用 Link 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42081142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantic UI (React): How to use Link components in Menu.List elements
提问by user3142695
I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Linkcomponent of react router
我试图让一个语义UI（反应）菜单列表，这应该与路由器的反应，我想用它来工作Link的组成部分react router
If I use this...
如果我用这个...
<Menu.Item name='profile'>
<Icon name='user' />
My profile
</Menu.Item>
...it gives me the result:
...它给了我结果：
<a class="item">
<i aria-hidden="true" class="user icon"></i>
My profile
</a>
But I would like to get something like
但我想得到类似的东西
<Link to='profile'>
<i aria-hidden="true" class="user icon"></i>
My profile
</Link>
This one doesn't work, as the syntax is wrong:
这个不起作用，因为语法错误：
<Menu.Item name='profile' as={ <Link to='profile' /> }>
<Icon name='user' />
My profile
</Menu.Item>
回答by Oleksandr Fediashov
You need use the SUIR's augmentation:
您需要使用 SUIR 的增强功能：
<Menu.Item as={ Link } name='profile' to='profile'>
<Icon name='user' />
My profile
</Menu.Item>
回答by Abdennour TOUMI
Use browserHistory.pushinstead ; It was provided also by react-routeras an alternative of Linkbut non-markup :
使用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>
If you want to get /profilefrom nameprops , change the line by :
如果您想/profile从nameprops获取，请通过以下方式更改行：
<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}
And if so , <Menu onItemClick={...} >is better than <Menu.item onClick={...} >
如果是这样，<Menu onItemClick={...} >比<Menu.item onClick={...} >
