React: 2 Ways to Open an External Link in New Tab

This article shows you two different ways to open an external link in a new browser tab in React. The first approach uses <a> tag, which is simple and quick but has some limitations. The second approach requires a dozen lines of code but is much cooler and more flexible. In the second one, we’ll use the latest version of React Router (6.x).

Using Anchor Tag

There is nothing related to React Router in this approach. You can let your users open an external link in a new tab with <a> tag and set the target prop to _blank, like so:

<a
   target="_blank"
   rel="noreferrer"
   href='https://www.kindacode.com'>
        Go to KindaCode.com
</a>

rel=”noreferrer” isn’t mandatory, but you should add it in order to avoid some annoying warnings.

Using React Router with <Link> or useNavigate()

As the time of writing, React Router 6 doesn’t support a built-in way to open an external link. The <Link> and <Navigate> components, as well as the useNavigate() hook, can only lead your user to routes that belong to your app. However, we can solve the problem by creating a custom page called RedirectPage. You can use the <Link> or <Navigate> components or the useNavigate() hook to take the user to this page. From here, you can redirect them to any external webpage:

// Redirect Page
const RedirectPage = () => {
  useEffect(() => {
    window.location.replace('https://www.kindacode.com');
  }, [])

  // Render some text when redirecting
  // You can use a loading gif or something like that
  return <div style={styles.container}>
    <h3>Redirecting...</h3>
  </div>
}

With this technique, opening an external link can be done programmatically (on a button click, by checking a checkbox, etc) or manually (like this first approach).

The Complete Example

App Preview:

The full code:

import { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/external-link' element={<RedirectPage />} />
      </Routes>
    </BrowserRouter>
  );
}

// Home Page
const Home = () => {
  return <div style={styles.container}>
    <p>
      <Link
        to="/external-link"
        target="_blank"
        rel="noreferrer"
        style={styles.link}>
        Go to KindaCode.com
      </Link>
    </p>

  </div>
}

// Redirect Page
const RedirectPage = () => {
  useEffect(() => {
    window.location.replace('https://www.kindacode.com');
  }, [])

  // Render some text when redirecting
  // You can use a loading gif or something like that
  return <div style={styles.container}>
    <h3>Redirecting...</h3>
  </div>
}

// Just some styles to make our app look a little better
const styles = {
  container: {
    padding: 30
  },
  link: {
    color: 'blue',
    textDecoration: 'underline'
  }
}

export default App;

Conclusion

You’ve learned a couple of different ways to open an external link in a new browser tab in React. This knowledge might be very helpful in many use cases, such as when your app contains a Privacy Policy page, a Terms of Use page, some Download pages on a subdomain, etc.

If you’d like to explore more new and exciting things about modern React development, have a look at the following articles:

• React Router: useParams & useSearchParams Hooks
• React Router: How to Highlight Active Link
• React Router: Programmatically Navigate on Button Click
• React + TypeScript: Making a Reading Progress Indicator
• React: Get the Position (X & Y) of an Element
• How to get the Width & Height of the Viewport in React

You can also check our React category page and React Native category page for the latest tutorials and examples.