<Link> to external page

[Manubi]

Hi,
I can't find anything in the documentation about how to use <Link /> with external urls. Just found this github issue...
#1147

Is it still the case that I need to implement the check myself if it's a App link or External page link?

I just want to implement a list of urls that are either on our app or link to an external page.

btw the react-router-hash-link is also not implemented?

btw2: The documentation of the router v6 without a search is rather difficult to navigate.

Thanks!

[brianespinosa]

This is still the best answer to external links.

Developers should be aware that their links outside of the application have nothing to do with the internal router at all and should reach for the appropriate tag versus using a Link component. You wanted to make sure to always use the came component everywhere, you could write your own that does the check to determine if it is external or internal, and even add some of the safe checks for noopener noferrer if you are opening a target="_blank". An example of how you might be able to build that component is also in the issue you reference.

[Manubi]

Thanks, I found that thread. But looking at the feedback I imagined the check would've been implemented by now into the router. Of course option in. But yeah...

Imho it doesn't help a lot to keep telling people that it has "nothing to do with the internal router". People make an array of objects with internal and external urls. People map over these objects. So in my view it would make sense to listen to people and make the DX better. Same with the hash-link mentioned above.

Anyway. Wish you a nice day.

And something I just found out now:

[brianespinosa]

The goal in pointing that out is to make sure there is an understanding about how something works so we don't just blindly feature request things that might semantically be beyond the scope of a library. Once that happens, if there is magic happening where the library checks things outside of the router's domain, where do the requests stop? That is why I referenced an example talking about target and rel attributes.

[Manubi]

The point is, almost everyone has to deal with external links in an app. I always thought it's common sense to improve the DX but I guess some artificial rules made up by someone are more important. Anyway, gl and hf. 😄

[brianespinosa]

Bud... I don't even maintain RR. I am just pointing you to the still current best answer to your question. Sorry you don't like the answer the maintainers are giving and the reasoning behind it.

[Manubi]

Thanks. What do u think?😅

[mfpopa]

<Link /> is meant to be used when you want to change the application route, which is an internal link inside your application, not to navigate to external links. External links will never be supported by React Router via the <Link /> component for that simple reason.

If you need a link component that has the same branding regardless if it's an internal or external link, then you should create one component that can differentiate between internal and external links as suggested by Ryan Florence and add your own branding. Or just create two separate components with your branding, one for external links, one for internal links that wraps around the React Router <Link /> component.

[ChristopherChudzicki]

I believe the above comments are outdated—This seems to have changed in January 2023 in #9900

Link behaves as one would expect for both internal and external links:

• <Link to="/search">hello</Link> is an in-app link that does not trigger a page reload
• <Link to={`${window.origin}/search`}>hello</Link> is an in-app link that does not trigger a page reload
• <Link to="https://github.com">hello</Link> triggers external navigation to github.

The exact logic can be seen here:

react-router/packages/react-router-dom/index.tsx

Lines 957 to 971 in 94f7fb7

	// Only check for external origins client-side
	if (isBrowser) {
	try {
	let currentUrl = new URL(window.location.href);
	let targetUrl = to.startsWith("//")
	? new URL(currentUrl.protocol + to)
	: new URL(to);
	let path = stripBasename(targetUrl.pathname, basename);
	if (targetUrl.origin === currentUrl.origin && path != null) {
	// Strip the protocol/origin/basename for same-origin absolute URLs
	to = path + targetUrl.search + targetUrl.hash;
	} else {
	isExternal = true;
	}

Though I've failed to find this mentioned anywhere in the docs.