[React Js] Open Links, Anchor, Router, PDF in New Tabs

In this React js tutorial, we will discuss how to open an external URL, an anchor tag with href, open links in new tab programmatically or even a PDF file in a new tab within your React application. We will discuss with the help of simple examples through different methods to open links in new tabs in React.js.

[lwptoc]

Why Open Links in New Tabs?

Let’s check some common uses where we need to open the links in a new tab in React or any find or web application:

Improved User Experience: It allows users to open the external links in a new tab so that they can easily navigate back without losing the context.
Accessibility: It can help users with disabilities to provide accessibility benefits like screen readers, and maintain context when exploring external content.
User Expectation: Users often need the link to open externally so that they don’t lose the current information or context.

React Router Setup

For opening the links in new tabs, we will be using the React Router library. Which is used for routing purposes in React applications. If you don’t have it in your application, follow these quick steps to interpret it:

1. Install React Router

Execute the following npm command to install the library:

npm install react-router-dom

2. Import and Set Up Router

In your index.js or App.js file, import BrowserRouter and wrap your application components with it.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

After the React Router is set up, we are ready to proceed with further implementation steps.

Using `window.open()` for External URLs in a New Tab

To open external URLs in a new tab, you can use the window.open() method. Let’s create a React component that opens a specified URL in a new tab when a button is clicked:

import React from 'react';

function App() {
  const openNewTab = (url) => {
    window.open(url, '_blank');
  };

  return (
    <div>
      <h1>Open Links in New Tabs</h1>
      <button onClick={() => openNewTab('https://example.com')}>
        Open Example.com in New Tab
      </button>
    </div>
  );
}

export default App;

In the above code, we have defined a function openNewTab() that takes a URL as an argument and uses window.open() to open it in a new tab when the button is clicked.

Opening Anchor Tags (`<a>`) in a New Tab

If you have an anchor tag (<a>) in your React component and want to open it in a new tab, you can use the target="_blank" attribute, just like you would in regular HTML. Here’s an example:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Open Links in New Tabs</h1>
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        Open Example.com in New Tab
      </a>
    </div>
  );
}

export default App;

In this example, the target="_blank" attribute ensures that the link opens in a new tab. Additionally, we included rel="noopener noreferrer" for security reasons to prevent security vulnerabilities.

Using React Router to Open Links in New Tabs

If we have a React Router for managing internal routing and we want to open links in a new tab, we can do that by simply adding target="_blank" to the Link component from React Router:

import React from 'react';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>Open Links in New Tabs</h1>
      <Link to="/" target="_blank">
        Home (Opens in New Tab)
      </Link>
    </div>
  );
}

export default App;

The target="_blank" attribute assures that the link opens in a new tab, even when using React Router for navigation.

Opening PDF Files in a New Tab

To open a PDF file in a new tab within your React application, we can use the same window.open() method. Here’s an example of how to open a PDF file when a button is clicked:

import React from 'react';

function App() {
  const openPdfInNewTab = () => {
    const pdfUrl = 'https://example.com/path/to/your/pdf.pdf';
    window.open(pdfUrl, '_blank');
  };

  return (
    <div>
      <h1>Open PDF in New Tab</h1>
      <button onClick={openPdfInNewTab}>Open PDF</button>
    </div>
  );
}

export default App;

Replace 'https://example.com/path/to/your/pdf.pdf' with the actual URL of your PDF file. By using the window.open() we can perform the action to open the link in tab programatically.

SEO Considerations

As we are dealing with external links, we should also touch on a quick discussion on SEO optimization. Here are some tips:

Use Descriptive Link Text: The links should have descriptive and relevant content where it points to, this helps the search engines to understand the exact intended context.
Add rel="nofollow": If links have user-generated or untrusted links, we should consider adding the rel="nofollow" to prevent search engines from following the link.
Anchor Text: The text in the anchor text should be meaningful For example, instead of “Click here,” use something more informative like “Read our latest blog post.”

Conclusion

In the above tutorial, we have discussed various methods to open the line in a new tab by using the anchor <a> tag, React Routers’s Link component and window.open() to control the behaviour programmatically. Opening links in new tabs can enhance the user experience and provide a seamless browsing journey for your users.

Category: React