Opening External Links in React

When creating internal links in your React app, you use a Link component. The usual choice is the one from React Router, or a framework like Gatsby or Next.js.

What about external links? In this post you will learn how to link to other websites from your React app.

Opening External Links

When you want to link to other websites, do not use the Link component from react-router-dom or any other package.

You need to use the <a> element for external links in React.

import React from 'react';

export default function App() {
  return (
    <div>
      <a href="https://example.com">Visit another website</a>
    </div>
  );
}

To open an external link in a new tab, add target="_blank" to the anchor element. When you use target="_blank", you should always add rel="noopener", which is necessary to prevent potential exploits.

<a href="https://example.com" target="_blank" rel="noopener">
  Visit another website
</a>

To make your life easier, you can create a component for external links to always include rel="noopener".

Creating a Custom Link Component

A custom component for external links includes rel="noopener" automatically, so you don’t risk forgetting about adding it.

components/ExternalLink.jsx

import * as React from 'react';

export default function ExternalLink({ children, url }) {
  return (
    <a href={url} target="_blank" rel="noopener">
      {children}
    </a>
  );
}

Now, use your component whenever you want to link to an external URL.

App.jsx

import ExternalLink from './components/ExternalLink';

export default function App() {
  return (
    <div>
      <ExternalLink url="https://example.com">Open link</ExternalLink>
    </div>
  );
}

Adding an Icon Next to External Links

You can add an icon next to external links to make them look different. It can help users understand that a link will take them away from your site.

First, you need to pick an icon to use. You can use React Icons for now.

Install React Icons package for your project.

npm install react-icons --save

Next, look for an “external” icon using React Icon’s search and pick one that you like. Let’s use HiOutlineExternalLink this time.

Finally, update your component to add the icon.

components/ExternalLink.jsx

import * as React from 'react';
import { HiOutlineExternalLink } from 'react-icons/hi';

const iconStyles = {
  verticalAlign: 'middle',
};

export default function ExternalLink({ url, withIcon, children }) {
  return (
    <a href={url} target="_blank" rel="noopener">
      {children}{' '}
      {withIcon && (
        <span style={iconStyles} aria-hidden="true">
          <HiOutlineExternalLink />
        </span>
      )}
    </a>
  );
}

ExternalLink.defaultProps = {
  withIcon: true,
};

The withIcon prop allows you to control whether you want the icon to show or not.

<ExternalLink url="https://example.com">Open link</ExternalLink>

// No icon
<ExternalLink url="https://example.com" withIcon={false}>Open link</ExternalLink>

To show the icon only when hovering on the link, you need to add some CSS.

components/ExternalLink.module.css

.link:hover .icon {
  visibility: visible;
}

.icon {
  vertical-align: middle;
  visibility: hidden;
}

Import the CSS module in your component and set the necessary className attributes.

components/ExternalLink.jsx

import * as React from 'react';
import { HiOutlineExternalLink } from 'react-icons/hi';

import * as styles from './ExternalLink.module.css';

export default function ExternalLink({ url, withIcon, children }) {
  return (
    <a href={url} target="_blank" rel="noopener" className={styles.link}>
      {children}{' '}
      {withIcon && (
        <span className={styles.icon} aria-hidden="true">
          <HiOutlineExternalLink />
        </span>
      )}
    </a>
  );
}

ExternalLink.defaultProps = {
  withIcon: true,
};

If you want to have control over opening the link in the same or a new tab, you can introduce another prop.

Modify your component with an openNewTab prop.

export default function ExternalLink({ url, withIcon, openNewTab, children }) {
  return (
    <a
      href={url}
      target={openNewTab ? '_blank' : '_self'}
      className={styles.link}
      rel="noopener"
    >
      { /* ✂️ */ }
    </a>
  );
}

ExternalLink.defaultProps = {
  withIcon: true,
  openNewTab: true,
};

Programmatically Opening Links in React

To open a link with JavaScript, you can use the Window.location property.

Here are 3 ways you can open any link programmatically.

function openLink() {
  // 1️⃣
  window.location = 'https://example.com';

  // 2️⃣
  window.location.href = 'https://example.com';

  // 3️⃣
  window.location.assign('https://example.com');
}

I usually go with the first one. The second option is useful in TypeScript, when it complains about assigning a string to Location type.

Don’t forget to attach your function to handle the onClick event on a button.

<button type="button" onClick={openLink}>
  Open link
</button>

Opening Links in a New Tab From Code

To programmatically open a link in a new tab use the window.open method.

window.open("https://example.com", "_blank", "noopener");

Summary

In this guide you learned how to open external links in React. Moreover, you saw how to create your own custom component to handle external links. And finally, you read about opening links programmatically in React.

Opening External Links in React