React Router — Redirect to an External URL
Tags: react, javascript, webdev
Published: 2022-09-24 10:57:43

Discover how to use React Router to link to an external URL, thanks to the Link component or an HTML anchor tag (`<a>`).

## How to Add an External Link With React Router?

You can use the `Link` component or an HTML anchor tag if you want to redirect to an external link with React Router. Using the `<Link>` component, you can do it thanks to the `pathname` and `target` parameters. It will redirect the user to the specified URL.

## Using React Router

In React, [React Router](https://reactrouter.com/en/main) is the most used library to manage your application routing (multi-pages application). Thanks to a set of functions and components provided by them, you can build a lot of features.

If you use this library to redirect to an external URL, you can use the `<Link />` component with the `pathname` and `target` property.

Let’s discover how to open [the HereWeCode homepage](https://herewecode.io/) in a new tab:

```react
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom"
import "./styles.css";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

function Home() {
  return (
    <div>
      <Link to={{ pathname: "https://herewecode.io/" }} target="_blank">Click to open HereWeCode (new tab)</Link>
    </div>
  )
}
```

As you can see above, when you pass an external URL to the React Router `Link` component and combine it with a `target="_blank"` property, the link will open a new tab with the URL of your choice.

> **Note:** Unfortunately, it's impossible to open an external URL in the same tab using React Router. If you don't provide the target property, the router will append the URL to your current website URL (e.g., `https://my-website.com/https://herewecode.io/`). In the next section, I'll show you how to open an external link in the current tab.

![React Router link to external URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4zk5g2ggg4ym7mblll5.png)

## Using an Anchor Tag (<a>)

If you want to open an external link to the current tab, the most straightforward way is to use the native anchor tag in HTML (`<a>`).

Here’s how to do it:

```react
import React from "react"

export default function App() {
  return (
    <div>
      <p>
        <a href="https://herewecode.io/">
          Click to open HereWeCode (current tab)
        </a>
      </p>
      <p>
        <a href="https://herewecode.io/" target="_blank">
          Click to open HereWeCode (new tab)
        </a>
      </p>
    </div>
  )
}
```

As you notice, we pass the external link to the `href` property. If no `target="_blank"` property is given, the link will open in the current tab; otherwise, in a new tab.

![React anchor tag example to redirect to external URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d96iw9omcijufxiog808.png)

If you want to learn more about React, here’s an article on [how to get URL params in React](https://herewecode.io/blog/react-router-link-to-external-url/) (with React Router V5/V6 and without).

---

**Thanks for reading. Let’s connect!**

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. [Join me on Twitter for more.](https://twitter.com/gaelgthomas) 🚀🎒