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.
Code:
// Get the length of the browser window window.innerWidth; // Get the height of the browser window window.innerHeight;
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:
window.open(url, name, specs, replace);Parameters:
- 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 window.open method
As mentioned above, we have learned about the window.open method. It will be applied in this approach. When the button is pressed, the handleClick function will run the window.open method and open a new tab.
Code:
import React from "react";
export default function App() {
function handleClick() {
window.open('https://learnshareit.com/', 'LearnShareIT', 'width=500,height=600');
}
return (
<div>
<h1>LearnShareIT Page</h1>
<button onClick={handleClick}>Home Page</button>
</div>
);
}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.
Code:
function App() {
return (
<Router>
<Routes>
<Route exact path="/homepage" component={Homepage}></Route>
<ul>
<li>
<Link to="/homepage" target="_blank">
Homepage
</Link>
</li>
</ul>
</Routes>
</Router>
);
}
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.
Summary
To summarize, there are some ways to open page in new tab on button click in React. You can do it by using the window.open method or React Router method. Thanks for reading!
Maybe you are interested:
- Set and Access state using a Dynamic key in React
- Export multiple components from a file in React.js
- Sort an Array of Objects in React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs