将React Semantic-UI Menu.Item包装在锚标签中而不破坏其样式

Question

I have a React Semantic Ui menu which has to link to another page. I am trying to wrap it with an anchor tag, but this completely breaks the styles on the menu buttons. I would like to think I'm doing something wrong before assuming it's a but.

This is what my code currently looks like:

<Menu tabular attached='top'>
   <a href={item1Url}><Menu.Item link>item1</Menu.Item></a>
   <a href={item2Url}><Menu.Item active link>Item 2</Menu.Item></a>
</Menu>

Before wrapping the Menu.Item with the a tag, this is what it currently looked like:

With the a tag wrapping it, it looks like this:

Not to mention that it disappears completely when I hover on it. Am I doing something wrong?

Answer 1

If you look at the doc , you can directly add the href (and target ) attributes to the Menu.Item element.

In your case the result would be:

<Menu tabular attached='top'>
   <Menu.Item href="item1Url">item1</Menu.Item></a>
   <Menu.Item href="item2Url"active>Item 2</Menu.Item></a>
</Menu>