Semantic UI - navigating to external link using Icon element

Question

I'm using the latest versions of react and semantic-ui-react

I have this Iconelement set up from semantic implementing navigation to an external link (github)

        <Menu.Item
          position="right"
          to="https://github.com"
          as={Link}
        >
          <Icon name="github" size="big" />
        </Menu.Item>

When I click the icon in my UI, it's trying to append the github url to the url of my UI. So I'm at localhost:blah/someUrl it's requesting localhost:blah/someUrl/https://github.com

Is this an issue with routing or misuse of the <Icon> props?

grenzbotin · Accepted Answer · 2019-03-01 19:12:22Z

4

It's rather a misuse of router link: If you want to link to external pages, don't use routers <Link> component.

It will work the following way:

<Menu.Item
 href="https://github.com"
 position="right"
 target="_blank"
>
 <Icon name="github" size="big" />
</Menu.Item>

answered Mar 1, 2019 at 19:12

grenzbotin

2,5651 gold badge14 silver badges14 bronze badges

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

1 Comment

DJ2 Over a year ago

ah yeah, I knew href was the answer

Collectives™ on Stack Overflow

Semantic UI - navigating to external link using Icon element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related