如何在新页面中打开(点击后) react组件

要在新页面中打开React组件，你可以使用React Router库来实现。React Router是React官方推荐的路由管理工具，它可以帮助我们在单页面应用中实现路由功能。

以下是使用React Router打开React组件的步骤：

首先，确保你已经安装了React Router库。可以使用以下命令进行安装：

npm install react-router-dom

在你的应用程序的根组件中，引入React Router的相关组件：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

创建一个新的组件，作为你要在新页面中打开的React组件：

import React from "react";

const NewPageComponent = () => {
  // 这里是你的组件内容
  return <div>这是新页面中的内容</div>;
};

export default NewPageComponent;

在你的应用程序中定义路由规则，并指定要在新页面中打开的组件：

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import NewPageComponent from "./NewPageComponent";

const App = () => {
  return (
    <Router>
      <div>
        <h1>我的应用程序</h1>
        <ul>
          <li>
            {/* 使用Link组件指定要打开的新页面 */}
            <Link to="/new-page">打开新页面</Link>
          </li>
        </ul>
        <Route path="/new-page" component={NewPageComponent} />
      </div>
    </Router>
  );
};

export default App;

在上面的代码中，我们使用Link组件来创建一个链接，点击该链接时将打开指定的新页面。to属性指定了新页面的URL路径，这里是/new-page。在Route组件中，我们指定了当访问/new-page路径时要显示的组件是NewPageComponent。

这样，当你点击"打开新页面"链接时，就会在新页面中打开NewPageComponent组件的内容。

关于React Router的更多信息和用法，请参考腾讯云提供的React Router相关文档：