React-semantic-ui with route errors

Question

I have a basic menu imported from react semantic-ui

<Menu secondary vertical>
        <Menu.Item
          name='account'
          active={activeItem === 'account'}
          onClick={this.handleItemClick}
        />

I obviously have more items and I modified such that each item from the menu links to a different page:

<Menu secondary vertical>
         <Link to="/account">
         <Menu.Item
          name='account'
          active={activeItem === 'account'}
          onClick={this.handleItemClick}
        />
        </Link>

The code obviously works as expected however I am getting the error

<a> cannot appear as a descendant of <a>

So I modified the code to <Menu.item as='div' and it still works however it loses some functionalities. Basically before I was able to hover on the menu item and it would show the result in the picture. To get on "account" the same result, I have to click twice. If I leave Menu.item as 'a' it works. Any way I could fix that? Picture 1

Lazar Nikolic · Accepted Answer · 2018-09-12 14:28:06Z

1

You should not be using Link and Menu.Item like that.

You could do something similar to what you already did with as property. You could say

<Menu.Item 
   as={Link}
   to={"/account"}
   name='account'
   active={activeItem === 'account'}
   onClick={this.handleItemClick}
>
    Account
</Menu.Item>

This means you need to import {Link} from react-router-dom which I suppose you already did

answered Sep 12, 2018 at 14:28

Lazar Nikolic

4,4041 gold badge26 silver badges46 bronze badges

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

2 Comments

Lazar Nikolic Over a year ago

Can I find out why was my answer down voted since it is perfectly functioning in the projects that I am making with react semantic ui?

Iulian Over a year ago

It works for me as well. Thanks for sharing. I didn't downvote, I can't upvote either since my account is brand new

Mosè Raguzzini · Accepted Answer · 2018-09-12 14:46:08Z

0

A workaround (if you do not need anchor tag for some reason) is to handle it in method handleItemclick:

handleItemClick = (e) => {
  //..code
  this.props.history.push('/myroute');
}

answered Sep 12, 2018 at 14:46

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

4 Comments

Lazar Nikolic Over a year ago

he does not need anchor tag. Menu.Item is anchor tag if you look at the DOM structure.

Mosè Raguzzini Over a year ago

@LazarNikolic his problem indeed is that both Link and Menu.Item render as anchor. If he want a fast solution and avoid css adjustment this will work fine without using <Link />

Mosè Raguzzini Over a year ago

@LazarNikolic your solution is valid, too

Iulian Over a year ago

Thanks, I consider it

Collectives™ on Stack Overflow

React-semantic-ui with route errors

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related