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

Last updated on May 9, 2022 A Goodman Loading... Post a comment

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 limitation. 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 create 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 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:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles