react后台管理系统打开一页内容页则打开一个tag标签对应页面关闭tag页跳转到上一个tag页

要实现这个功能，你可以使用React的路由库来管理页面跳转和标签页的打开与关闭。下面是一种可能的实现方式：

1. 首先，安装react-router-dom库，用于管理页面路由：

npm install react-router-dom

2. 创建一个Main组件，作为你的后台管理系统的主页面组件。在这个组件中，你可以使用react-router-dom来定义路由和标签页的打开与关闭。

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Main = () => {
  const [tags, setTags] = useState([]); // 用于存储打开的标签页

  // 关闭标签页
  const closeTag = (tag) => {
    setTags(tags.filter((t) => t !== tag));
  };

  // 渲染标签页列表
  const renderTags = () => {
    return tags.map((tag) => (
      <div key={tag}>
        <Link to={tag}>{tag}</Link>
        <button onClick={() => closeTag(tag)}>关闭</button>
      </div>
    ));
  };

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/page1">页面1</Link>
            </li>
            <li>
              <Link to="/page2">页面2</Link>
            </li>
          </ul>
        </nav>

        <div>
          {/* 渲染标签页 */}
          {renderTags()}
        </div>

        <Switch>
          <Route path="/" exact>
            <h1>首页</h1>
          </Route>
          <Route path="/page1">
            {/* 打开页面1的标签页 */}
            <h1>页面1</h1>
            <button onClick={() => setTags([...tags, '/page1'])}>打开标签页</button>
          </Route>
          <Route path="/page2">
            {/* 打开页面2的标签页 */}
            <h1>页面2</h1>
            <button onClick={() => setTags([...tags, '/page2'])}>打开标签页</button>
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default Main;

在上面的代码中，我们使用useState来管理打开的标签页列表。当点击打开标签页的按钮时，我们将对应的路由添加到标签页列表中。关闭标签页时，我们从列表中移除对应的路由。

3. 在你的应用中使用Main组件作为后台管理系统的主页面：

import React from 'react';
import Main from './Main';

const App = () => {
  return (
    <div>
      <h1>后台管理系统</h1>
      <Main />
    </div>
  );
};

export default App;

这样，当你在后台管理系统中点击页面链接时，会在标签页上打开对应的页面。关闭标签页时，会返回到上一个标签页。