Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 664
snowflakekiller Avatar asked Sep 12 '17 12:09

snowflakekiller


People also ask

How do I link an outside site to a response?

Use the window. location. replace() method to redirect to an external url in React, e.g. window. location.

What is the difference between NavLink and link?

Conclusion. The NavLink is used when you want to highlight a link as active. So, on every routing to a page, the link is highlighted according to the activeClassName . Link is for links that need no highlighting.

How do you redirect to another URL in React JS?

To redirect to an external url in React, we can use the window. location. href property. import React, { useEffect } from "react"; function Contact() { useEffect(() => { window.

How do I import a NavLink into React?

Import NavLink into scope first: import { NavLink } from 'react-router-dom'; Then create the Navigation component just below the App component.


2 Answers

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>
like image 195
Sagiv b.g Avatar answered Sep 20 '22 16:09

Sagiv b.g


<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>
like image 27
rttss_sahil Avatar answered Sep 19 '22 16:09

rttss_sahil