CODEWITHSUNDEEP
reactjsreact-router
snowflakekiller
snowflakekiller

Reputation: 3568

using NavLink with external URL

I have the following code:

    <NavLink to="//student.lvh.me:8080/users/edit">
      <DropDownLink>Wiki</DropDownLink>
    </NavLink>

how do I get navlink to work with external URLs? I get the following error in console:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://student.lvh.me:8080/users/edit' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/'.

is there a better way to handle external links?

Upvotes: 14

Views: 22885

Answers (2)

rttss_sahil
rttss_sahil

Reputation: 253

<NavLink> is very easy to use for navigating to external url. Try this:

<NavLink to={{pathname: "https://infortts.com"}} target="_blank">
  Some Component Here
</NavLink>

Upvotes: 4

Sagiv b.g
Sagiv b.g

Reputation: 31024

react-router meant to route in a Single Page Applications, i.e route is handled on the client side.
When you want to route to an external page e.g route is handled on the server side, you can use a normal anchor tag:

<a href="url.com">Wiki</a>

Upvotes: 30

Related Questions