How To Open Page In A New Tab On Button Click In React

Open page in new tab on button click in React

This article will show you how to open page in new tab on button click in React. Here are some ways to do it with examples to make it easier for readers to understand.

What is BOM?

BOM? This word seems quite strange to you. This word stands for the phrase Browser Object Model – objects related to the browser only.

Different browsers will have slightly different objects, so there will not be a common standard between BOMs. You may not know the DOM and the popup messages on the screen are also in the BOM group.

What is a Windows object?

This window object, as the name implies, is the object that affects our browser window. It is also integrated into most of today’s browsers.

Get the parameters of the browser window

As I said above, each browser will have a slightly different BOM, so the way to get the information is also a bit different.


// Get the length of the browser window

// Get the height of the browser window

Open a new browser window. This is also a method. We use the open() function with the following syntax to open a new browser window.

Syntax:, name, specs, replace);


  • url: The address we’d like to open.
  • name: The title you intend to give to that window.
  • specs: The window’s parameters include the following:
    • The browser height: height (in pixels).
    • The browser’s width: width (in pixels).
    • The browser window’s position in the display: top (in pixels), left (in pixels).
    • Display a menu bar: yes, 1 or no, 0.
    • Display a status bar: yes, 1 or no, 0.
  • replace: (True or false) Indicates whether the URL adds a new entry to the history list or replaces the current entry.

Open page in new tab on button click in React

Use method

As mentioned above, we have learned about the method. It will be applied in this approach. When the button is pressed, the handleClick function will run the method and open a new tab.


import React from "react";

export default function App() {
    function handleClick() {'', 'LearnShareIT', 'width=500,height=600');

    return (
            <h1>LearnShareIT Page</h1>
            <button onClick={handleClick}>Home Page</button>

When you select the ‘Home Page‘ button, the browser will open a new tab leading to the home page. Or you can refer to how to do it below.

Use React Router method

In this approach, we will apply react-router’s page-switching mechanism. When clicking on the homepage link, the program will switch to a new tab and have the url “http://localhost:3000/homepage”. See the example below for more details.


function App() {
    return (
                <Route exact path="/homepage" component={Homepage}></Route>
                        <Link to="/homepage" target="_blank">

export default App;

So when opening a new tab, the content inside that tab is the component we put in the <Route>. This way, we can also open a tab when clicking on an element. I hope this helps you.


To summarize, there are some ways to open page in new tab on button click in React. You can do it by using the method or React Router method. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *