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?
Use the window. location. replace() method to redirect to an external url in React, e.g. window. location.
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.
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.
Import NavLink into scope first: import { NavLink } from 'react-router-dom'; Then create the Navigation component just below the App component.
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>
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With