React-router External link

Crystal clear ways for external redirection

Function component for redirection

When you are dealing with redirection and need to apply some logic before the "launch", use a function component. Imagine this function component as your personal launch controller:

// Here's your friendly redirection manager, all set to blast off! 🚀 
const Redirector = ({ url }) => {
  useEffect(() => { window.location.href = url; }, [url]);
  return null;
};


Security rules for opening new tabs

Security first! When using an a tag, remember to include noopener noreferrer in the rel attribute. We don't want any crafty tab-nabbing:

// Your safe passageway to the world of external linking!
<a href="https://secure-external-link.com" target="_blank" rel="noopener noreferrer">Open Secure Link</a>


Using React Router's <Link> for external links

If you miss the feel of React Router, worry not! Use the full URL in the <Link> component's to property. It's the soft chime of homely feels in a world full of <a> tags:

// This <Link /> component makes your old school heart sing, doesn't it? 😊
<Link to="http://external.com" target="_blank">External Link</Link>


Don't forget, target="_blank" will open the URL in a new tab.

Navigating outside React components

In situations where we want to perform navigation from non-component logic (like a Redux action creator bossing around), use window.location.href. This hunkers down directly at the low-level JavaScript, bypassing React Router and its nuances:

window.location.href = 'https://external-site.com'; // Just brute force it!


Esoteric Redux - extra handling for external URLs

Class components still got the game for redirection

Even in the world of functional components and hooks, React's class components hold their ground. When using class components, componentDidMount makes an excellent spot for external redirects:

class ExternalRedirect extends React.Component {
  componentDidMount() {
    window.location.replace(this.props.url); // YOLO! Let's go!
  }

  render() {
    return null;
  }
}


The window.location.replace is our sneaky friend. It behaves as a redirect without creating a history entry.

Respecting user privacy - No leaks allowed!

In the wild world of the web, your user's privacy is paramount. Always use the rel='noreferrer' attribute when creating a tags leading to external sites. It keeps the referer header leak in check:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>


The difference between direct and safe navigation

The window.open function opens external links in new tabs. However, it might act like a wild stallion unless tamed correctly:

window.open('https://external-site.com', '_blank', 'noopener,noreferrer'); // Tame the stallion securely


The little quirks of React Router versions

When you're seeking a custom <Redirect> solution, pay heed to the different versions of React Router. The classic React Router v3 may simplify custom redirection with <Redirect>, whereas v4 could pose challenges and might require additional dependencies or configurations.