how to use react-router Link with semantic-ui Menu.Item?

Question

I have this:

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

but I get an error in the console:

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)

How should I properly define my links?

score 11 · Answer 1 · answered Jul 10 '19 at 09:16

11

You can just use as prop in SemanticUI components.

...
import { Link } from "react-router-dom";
import { Menu } from "semantic-ui-react";

...
<Menu.Menu>
   <Menu.Item as={Link} to="/path">Click me</Menu.Item>
</Menu.Menu>
...

answered Jul 10 '19 at 09:16

Jerad Rutnam

1,536
1
14
29

This is the best answer — the official documentation recommends the same technique of using `as` for `react-router`: https://react.semantic-ui.com/#augmentation – gutch Nov 16 '19 at 01:29

score -1 · Accepted Answer · answered Oct 16 '17 at 11:53

There's an onClick props for each Menu.Item in Material UI. You can use this.props.history.push('/') inside the 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

You might want to use withRouter though. See How to push to History in React Router v4?

how to use react-router Link with semantic-ui Menu.Item?

2 Answers2