Sometimes, we want to add an external link with React Router.

In this article, we’ll look at how to add an external link with React Router.

How to add an external link with React Router?

To add an external link with React Router, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked.

For instance, we write

<Link to={{ pathname: "https://example.com" }} target="_blank" />

to set the to prop to { pathname: "https://example.com" } to go to https://example.com when we click on the link.

Also, we set target to _blank so that the link opens a new tab when we click it.

Conclusion

To add an external link with React Router, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked.