using NavLink with external URL

user_795374 0
Viewed 15914

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?

react-router reactjs
3 Answers

<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>
user_149348350

Since NavLink is using router, the external url should goes via "as"

 <NavLink as="a" href="https://student.lvh.me:8080/users/edit" target="_blank" >
    <DropDownLink>Wiki</DropDownLink>
 </NavLink>

or without using React router

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