Wie verwende ich den react-router Link mit semantic-ui Menu.Item?

Question

Ich habe dies:

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

aber ich erhalte eine Fehlermeldung in der Konsole:

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) 

Wie soll ich meine Links richtig definieren?

Answer 1

Es gibt eine onClick props für jede Menu.Item in Material UI. Sie können this.props.history.push('/') innerhalb der onClick-Handler:

<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 

Sie möchten vielleicht withRouter obwohl verwenden. Siehe How to push to History in React Router v4?