React Semantic UI How to use "Link"

Question

I'm new to semantic-ui. I try to map Menu Items with lodash. But unfortunately I can't routing my elements.

Here is my code

</Menu.Item>
    {_.map(menuItems, item => <Menu.Item {...item} />)}
</Menu.Menu>

And its my menu object

const menuItems= [
  { as: "a", content: "About Us", key: "about", path:"/about"},
  { as: "a", content: "Contact", key: "contact", path:"/contact"}
];

so I want to Link my menu with react-router. I try everythink but i cant solve the problem

It returns

 <a path="/about" ........>

But I want to get

<Link path="/about".....>

How can i do solve the problem? Thank you.

Sagiv b.g · Accepted Answer · 2018-09-17 20:49:47Z

1

You can pass it as={Link}.

So basically your objects should reflect that:

const menuItems= [
  { as: Link, content: "About Us", key: "about", path:"/about"},
  { as: Link, content: "Contact", key: "contact", path:"/contact"}
];

edited Sep 17, 2018 at 20:49

answered Sep 17, 2018 at 20:38

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

3 Comments

Ryoush Over a year ago

I try that. It returns "Warning: <Link /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements." and return Links not clickable.

Sagiv b.g Over a year ago

@Ryoush note that it should be as: Link (Link is a variable) and not as:'Link' (string)

Ryoush Over a year ago

You have returned me from a big mistake. I'm never thinking of that. Thank you :)

Collectives™ on Stack Overflow

React Semantic UI How to use "Link"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related