¿Cómo abrir un componente en una nueva pestaña en ReactJS?

React Router es una biblioteca estándar para el enrutamiento en React. Permite la navegación entre vistas de varios componentes en una aplicación React, permite cambiar la URL del navegador y mantiene la interfaz de usuario sincronizada con la URL. En este tutorial, comprenderá cómo abrir un nuevo componente en otra pestaña mientras reside en la aplicación principal. Para la demostración, crearemos dos componentes: el primer componente y un segundo componente. Usaremos Switch, React Router, Link para abrir estos dos componentes en nuevas pestañas. 

Enfoque:  Crearemos dos componentes simples que nombrarán ‘FirstComponent’ y ‘SecondComponent’. En nuestro componente principal, es decir, App.js, proporcionaremos 2 botones con enlaces para abrir el primer y el segundo componente. Luego aplicaremos la lógica para abrir ese primer y segundo componente en una nueva pestaña con diferentes rutas.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Paso 3: Instalación de paquetes. React Router se puede instalar a través de npm en su aplicación React. Para instalar React Router, use el siguiente comando:

npm install react-router-dom 

Estructura del proyecto:  la estructura de archivos predeterminada se verá así:

estructura del proyecto

Después de instalar react-router-dom, agregue sus componentes a su aplicación React. Para saber más sobre el enrutador de reacción, consulte este artículo: https://www.geeksforgeeks.org/reactjs-router/ 

Cambiar la estructura del proyecto:  en el directorio de su proyecto, cree 2 archivos llamados FirstComponent.js y SecondComponent.js en la carpeta src. Ahora su nueva estructura de proyecto se verá así:

nueva estructura del proyecto

Ejemplo: Entendamos la implementación a través del ejemplo. 

FirstComponent.js:  este es el componente que usaremos para mostrar en una nueva pestaña. Intentaremos abrir este componente cuando un usuario intente abrir el primer componente al hacer clic. Este componente contiene un encabezado con algunos estilos CSS aplicados.

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: este es el segundo componente que usaremos para mostrar en una nueva pestaña. Intentaremos abrir este componente cuando el usuario intente abrir el segundo componente al hacer clic. Este componente contiene un encabezado con algunos estilos CSS aplicados.

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;

Ruta: el componente de ruta nos ayudará a establecer el vínculo entre la interfaz de usuario del componente y la URL. Para incluir rutas a la aplicación, agregue el código que figura a continuación en su app.js.

App.js: App.js es nuestro componente predeterminado donde ya está escrito un código predeterminado. Ahora importe nuestros nuevos componentes en el archivo App.js. Incluya componentes de React Router en la aplicación. Intentaremos abrir el primer componente cuando el usuario haga clic en el botón «Abrir primer componente». Para esto, proporcionamos el enlace para abrir la ruta al primer componente, es decir, «/geeks/primero». Por lo tanto, el primer componente se abrirá en una nueva pestaña en la ubicación «http://localhost:3000/geeks/first». De manera similar, intentaremos abrir el segundo componente cuando el usuario haga clic en el botón «Abrir segundo componente». Para esto, proporcionamos el enlace para abrir el camino al segundo componente, es decir, «/geeks/segundo». Por lo tanto, SecondComponent se abrirá en una nueva pestaña en la ubicación «http://localhost:3000/geeks/second».

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;

Paso para ejecutar la aplicación:  ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: su aplicación web estará activa en «http://localhost:3000». Ahora, haga clic en los enlaces que creó. 

Explicación: Notarás que ambos componentes se abrirán en una nueva pestaña con sus rutas particulares. Su FirstComponent se abrirá en una nueva pestaña en la ubicación «http://localhost:3000/geeks/first». Su SecondComponent se abrirá en una nueva pestaña en la ubicación «http://localhost:3000/geeks/second».