Table of Contents
React is a popular front-end library for designing user interfaces.
This means that many developers will be looking to do common things like open links in a new tab.
In this article, we will learn how to open a link in a new tab using React.
How to Open a Link in a New Tab
Because writing JSX is similar to writing HTML, we can use the target attribute to open a link in a new tab, just like normal HTML.
First, let's create a normal link in React.
JSXimport React from "react";
const App = () => {
return (
<a href="https://www.google.com">Google</a>
);
};
export default App;
Now, let's add the target attribute to open the link in a new tab.
JSXimport React from "react";
const App = () => {
return (
<a href="https://www.google.com" target="_blank">Google</a>
);
};
export default App;
Now, it is good practice to also add the rel attribute to prevent security vulnerabilities.
JSXimport React from "react";
const App = () => {
return (
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
);
};
export default App;
Conclusion
In this article, we learned how to open a link in a new tab using React.
Because React's JSX is very similar to HTML, we can do this the same way as we would in HTML, by adding the target attribute.
Thanks for reading!
- How to Install Node on Windows, macOS and Linux
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- How to deploy a PHP app using Docker
- How to deploy a MySQL Server using Docker
- Getting Started with Sass
- Using Puppeteer and Jest for End-to-End Testing
- How to Scrape the Web using Node.js and Puppeteer
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting Started with Moment.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Getting Started with Vuex: Managing State in Vue