question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

External/full links should bypass react-router-component

See original GitHub issue

In order to integrate with legacy sites, we need react router to hijack the links or send the user to a hardcoded url. It’d be nice for react-router-component to simply pass through requests for full links.

ie

React.createElement(Link, {
    href: 'http://example.com/page1',
}, 'Click here')

Currently, if you try to do an external link through react-router-component, as shown above you’ll end up navigating to something like http://mydomain:3000/example.com/page1 which will in most cases hit the react-router-component NotFound page.

Because ‘http://example.com/page1’ is a full link, it should escape the react-router component and do a normal browser request.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:1
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
ftorre104commented, Jan 12, 2015

Apparently

React.createElement(Link, {
    className: 'sitemap-link',
    href: 'http://example.com/profile',
    rel: 'external'
}, 'See your profile')

Is being translated into:

<a class="sitemap-link" href="http:/example.com/profile" rel="external" data-reactid=".2f156eg3aio.1.0.0.0.1.4">See your profile</a>

However, I tried updating the html on the fly to a syntactically correct full link http://example.com. https://www.dropbox.com/s/z712upmm4eihuxh/Screenshot 2015-01-12 10.55.46.png?dl=0 But react-router-component still grabs it on click and makes it relative: http://localhost:3000/example.com/profile

0reactions
STRMLcommented, Feb 26, 2015

Published as 0.24.0.

Read more comments on GitHub >

github_iconTop Results From Across the Web

You should not use <Link> outside a <Router> - Stack Overflow
This error message is essentially saying that any component that is not a child of our <Router> cannot contain any React Router related ......
Read more >
Link v6.6.1 - React Router
In react-router-dom , a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This...
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
Ultimate React Router v6 Guide
React Router is by far the most popular routing library in React and this article goes in depth on everything you need to...
Read more >
Configuring links | React Navigation
In this guide, we will configure React Navigation to handle external links. This is necessary if you want to: Handle deep links in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found