如何在 ReactJS 的新选项卡中打开组件？

React Router 是 React 中用于路由的标准库。它支持在 React 应用程序中各种组件的视图之间导航，允许更改浏览器 URL，并使 UI 与 URL 保持同步。在本教程中，您将了解如何在驻留在主应用程序中时在另一个选项卡中打开新组件。为了演示，我们将创建两个组件：第一个组件和第二个组件。我们将使用 Switch、React Router、Link 在新选项卡中打开这两个组件。

方法：我们将创建两个简单的组件，分别命名为“FirstComponent”和“SecondComponent”。在我们的主要组件 App.js 中，我们将提供 2 个带有链接的按钮来打开第一个和第二个组件。然后我们将应用逻辑在具有不同路由的新选项卡中打开第一个和第二个组件。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第三步：安装包。 React Router 可以通过 npm 在您的 React 应用程序中安装。要安装 React Router，请使用以下命令：

npm install react-router-dom 

项目结构：默认文件结构如下所示：

项目结构

安装 react-router-dom 后，将其组件添加到您的 React 应用程序中。要了解有关 react-router 的更多信息，请参阅本文：https://www.geeksforgeeks.org/reactjs-router/

更改项目结构：在您的项目目录中，在 src 文件夹中创建两个名为 FirstComponent.js 和 SecondComponent.js 的文件。现在您的新项目结构将如下所示：

新的项目结构

示例：让我们通过示例来了解实现。

FirstComponent.js：这是我们将用于在新选项卡中显示的组件。当用户尝试在单击时打开第一个组件时，我们将尝试打开此组件。该组件包含一个应用了一些 CSS 样式的标题。

FirstComponent.js

import React from "react";
  
// First simple component with heading tag
function FirstComponent() {
  return (
    

      

        ????Geeks For Geeks First Component in New Tab????
      
    
  );
}
export default FirstComponent;

SecondComponent.js：这是我们将用于在新选项卡中显示的第二个组件。当用户试图在点击时打开第二个组件时，我们将尝试打开这个组件。该组件包含一个应用了一些 CSS 样式的标题。

SecondComponent.js

import React from "react";
  
// Second simple component with heading tag
function SecondComponent() {
  return (
    

      

        ????Geeks For Geeks Second Component in New Tab
      
    
  );
}
export default SecondComponent;

Route： Route组件将帮助我们建立组件的UI和URL之间的链接。要包含应用程序的路由，请将下面给出的代码添加到您的 app.js。

App.js： App.js 是我们的默认组件，其中已经编写了一些默认代码。现在在 App.js 文件中导入我们的新组件。在应用程序中包含 React Router 组件。当用户单击“打开第一个组件”按钮时，我们将尝试打开第一个组件。为此，我们提供了打开第一个组件路径的链接，即“/geeks/first”。因此，第一个组件将在“http://localhost:3000/geeks/first”位置的新选项卡中打开。同样，当用户单击“打开第二个组件”按钮时，我们将尝试打开第二个组件。为此，我们提供了打开第二个组件路径的链接，即“/geeks/second”。因此，SecondComponent 将在“http://localhost:3000/geeks/second”位置的新选项卡中打开。

应用程序.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
    
   
      {/*switch used to render only the first
       route that matches the location rather 
       than rendering all matching routes. */}
      
        
        
        
        
        

          

          

   
            {/* Link component uses the to prop 
            to describe the location where the 
            links should navigate to. */}
            
              Open First Component
            
          
          

          

            
              Open Second Component
            
          
        
      
    
  );
}
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：您的 Web 应用程序将在“http://localhost:3000”上运行。现在，单击您创建的链接。

说明：您会注意到这两个组件都将在一个新选项卡中打开，其中包含它们的特定路径。您的 FirstComponent 将在“http://localhost:3000/geeks/first”位置的新选项卡中打开。您的 SecondComponent 将在“http://localhost:3000/geeks/second”位置的新选项卡中打开。