CODEWITHSUNDEEP
reactjsreact-routersemantic-ui
karolis2017
karolis2017

Reputation: 2415

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

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?

Upvotes: 1

Views: 3966

Answers (2)

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

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>
...

Upvotes: 11

Dane
Dane

Reputation: 9582

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?

Upvotes: -1

Related Questions