Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 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.

Creating React Application And Installing Module:

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 tag
function 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 tag
function 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 components
import 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :