如何使用react-router Link with semantic-ui Menu.Item？

Question

我有这样的：

<Link to="/"> 
    <Menu.Item name='expense List' active={activeItem === 'expense List'} onClick={this.handleItemClick} /> 
    </Link> 

，但我在控制台得到一个错误：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 
    in a (created by MenuItem) 
    in MenuItem (at Header.js:26) 
    in a (created by Link) 
    in Link (at Header.js:25) 
    in div (created by Menu) 
    in Menu (at Header.js:22) 
    in div (at Header.js:20) 
    in Header (at AddExpense.js:8) 
    in div (at AddExpense.js:7) 
    in AddExpense (created by Route) 
    in Route (at index.js:20) 
    in Switch (at index.js:18) 
    in Router (created by BrowserRouter) 
    in BrowserRouter (at index.js:17) 
    in Routes (at index.js:30) 

我应该如何正确地定义我的链接？

Answer 1

在Material UI中每个Menu.Item都有一个onClick props。您可以使用this.props.history.push('/')的的onClick处理程序中：

<Menu.Item 
    name='expense List' 
    active={activeItem === 'expense List'} 
    onClick={() => this.props.history.push('/')} /> 
    // You can also define the function outside and call history.push there 

您可能需要使用withRouter虽然。见How to push to History in React Router v4?