How to open a component in a new tab in ReactJS ?

19 Oct, 2021
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. In this tutorial, you will understand how to open a new component in another tab while residing in the main application. For demonstration, we will create two components: the first component and a second component. We will use Switch, React Router, Link to open these two components in new tabs. 
Approach: We will create two simple components naming ‘FirstComponent’ and ‘SecondComponent’. In our main component i.e. App.js, we will provide 2 buttons with links to open the first and second components. Then we will apply the logic to open that first and second component in a new tab with different routes.
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
 
Step 3: Installing packages. React Router can be installed via npm in your React application.To install the React Router use the following command:
npm install react-router-dom 
Project Structure: The default file structure will look like this :
project structure
After installing react-router-dom, add its components to your React application. To know more about react-router refer this article: https://www.geeksforgeeks.org/reactjs-router/ 
Changing the project structure: In your project directory, create 2 files named FirstComponent.js and SecondComponent.js in the src folder. Now your new project structure will look like this:
new project structure
Example: Let’s understand the implementation through example. 
FirstComponent.js: This is the component which we will use to display in a new tab . We will try to open this component when a user tries to open the first component on click. This component contains a heading with some CSS styles applied.
FirstComponent.js
import React from "react";  // First simple component with heading tagfunction FirstComponent() {  return (    <div>      <h1        style={{ // Applying some styles to the heading          display: "flex",          justifyContent: "center",          padding: "15px",          border: "13px solid #b4f0b4",          color: "rgb(11, 167, 11)",        }}      >        ????Geeks For Geeks First Component in New Tab????      </h1>    </div>  );}export default FirstComponent;
SecondComponent.js: This is the second component which we will use to display in a new tab . We will try to open this component when the user tries to open the second component on click. This component contains a heading with some CSS styles applied.
SecondComponent.js
import React from "react";  // Second simple component with heading tagfunction SecondComponent() {  return (    <div>      <h1        style={{ // Applying some styles to the heading          display: "flex",          justifyContent: "center",          padding: "15px",          border: "13px solid #6A0DAD",          color: "#7F00FF",        }}      >        ????Geeks For Geeks Second Component in New Tab      </h1>    </div>  );}export default SecondComponent;
Route: Route component will help us to establish the link between the component’s UI and the URL. To include routes to the application, add the code give below to your app.js.
App.js: App.js is our default component where some default code is already written. Now import our new components in the App.js file. Include React Router components in the application. We will try to open the first component when the user will click the “Open First Component” button. For this, we are providing the Link to open the path to the first component i.e. “/geeks/first”. Thus the first component will open in a new tab at “http://localhost:3000/geeks/first” location . Similarly, We will try to open the second component when the user will click the “Open Second Component” button. For this, we are providing the Link to open the path to the second component i.e. “/geeks/second”. Thus the SecondComponent will open in a new tab at “http://localhost:3000/geeks/second” location.
App.js
import React from "react";import { BrowserRouter as Router, Route, Link, Switch }        from "react-router-dom";  // Importing newly created componentsimport SecondComponent from "./SecondComponent";import FirstComponent from "./FirstComponent";   function App() {  return (       // BrowserRouter to wrap all    // the other components    <Router>         {/*switch used to render only the first       route that matches the location rather        than rendering all matching routes. */}      <Switch>        <Route exact path="/geeks/second"             component={SecondComponent}>        </Route>        <Route exact path="/geeks/first"             component={FirstComponent}>        </Route>        <ul>          <br />          <li>               {/* Link component uses the to prop             to describe the location where the             links should navigate to. */}            <Link to="/geeks/first" target="_blank">              Open First Component            </Link>          </li>          <br />          <li>            <Link to="/geeks/second" target="_blank">              Open Second Component            </Link>          </li>        </ul>      </Switch>    </Router>  );}export default App;
Step to Run Application: Run the application using the following command from the root directory of the project :
npm start
Output: Your web application will be live on “http://localhost:3000”.Now, click on the links you created. 
Explanation: You will notice that both components will open in a new tab with their particular routes. Your FirstComponent will open in a new tab at “http://localhost:3000/geeks/first” location. Your SecondComponent will open in a new tab at “http://localhost:3000/geeks/second” location.
Picked
React-Questions
routing
TrueGeek-2021
ReactJS
TrueGeek
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.