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?

Jerad Rutnam · Accepted Answer · 2019-07-10 09:16:39Z

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, 2019 at 9:16

Jerad Rutnam

1,5461 gold badge14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gutch Over a year ago

This is the best answer — the official documentation recommends the same technique of using as for react-router: react.semantic-ui.com/#augmentation

Dane · Accepted Answer · 2017-10-16 11:53:24Z

-1

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?

answered Oct 16, 2017 at 11:53

Dane

9,6135 gold badges38 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related