react ziluyoubiaoqian

如果你想在 React 中实现自定义标签页，可以使用 React Router 库。首先，你需要安装 React Router：

npm install react-router-dom

然后，你可以在你的应用程序中导入 `BrowserRouter` 和 `Switch` 组件，并使用 `Route` 组件来定义每个页面的路由。

例如，你可以创建一个 `Tabs` 组件，其中包含多个标签页，每个标签页都有自己的路径和组件。你可以使用 `Link` 组件来创建导航链接，使用户可以切换不同的标签页。

下面是一个示例代码：

import React from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

function Tab1() {
  return <h1>Tab 1</h1>;
}

function Tab2() {
  return <h1>Tab 2</h1>;
}

function Tab3() {
  return <h1>Tab 3</h1>;
}

function Tabs() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/tab1">Tab 1</Link>
            </li>
            <li>
              <Link to="/tab2">Tab 2</Link>
            </li>
            <li>
              <Link to="/tab3">Tab 3</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/tab1">
            <Tab1 />
          </Route>
          <Route path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default Tabs;

在这个示例中，我们创建了一个 `Tabs` 组件，其中包含三个标签页。我们使用 `Link` 组件来创建导航链接，使用 `Route` 组件来定义每个标签页的路径和组件。当用户点击导航链接时，React Router 会自动更新 URL 并显示对应的组件。