我看了你的多Tab的实现思路，结合我自己之前的实现过程，个人觉得你的实现中有几点可以优化下。

1、tabList放在model里面的state会更好， 并且在effects中实现add, remove, change, clear，back, forward等方法，其他页面中可以这些方法做打开新Tab等操作

2、 可以在add 新Tab页的时候做下容错处理，当想打开不存在页面的时候，返回404页面

3、Exception 几个页面的返回按钮最好删除，或者做其他的处理，不然点击的效果不是想要的

求大佬解决

怎么让标签栏固定而不随页面拉动而动

实现了您的多标签页tab后导致了 官方框架 个人页-》个人设置-》基本设置、安全设置、帐号绑定，新消息通知 四个页面内标签切换的时候不能显示右侧区域原本的内容。 加载的children丢失为null。

如题

用npm run build打包后，根据官方文档配置nginx，发现只能访问首页，其余任何子页面都无法正确显示。对比测试antd-pro官网的代码，打包后配合nginx使用一切正常。
补充：API接口是重定向到同一个项目另一个运行实例的

我准备使用您的这个框架开发一个管理后台，感谢您的分享，谢谢！

我在测试过程中发现点击浏览器的前进和后退时TAB页没有正确切换，左侧导航菜单是有正确切换样式的，但TAB页没有自动切换到对应的页面，期待能够增加此功能。

tab切换如果做到不重新请求

这个页面切换回来会丢失输入的内容

请教一下tabPane

tabPane里面如果不用react-router-dom.还可以用什么渲染？这里用react-router-dom会有问题，解决方案是最好不用，想请教还有什么可以渲染dom

现在的首页是一个空的页面,把其他如分析页,工作台,个人信息等放到首页来,都会报错或则不能加载数据

请教一下，哪段代码是刷新页面回到的首页

请问为什么选择topmenu模式后路由就会报错

何时出V4版本？

有没有考虑过添加多标签右键管理菜单,例如关闭当前,关闭其他,关闭所有,刷新一类的,有的时候打开的标签页多了,这个功能是很有必要的

刷新浏览器后多标签tabs不见了，会回到首页，如何刷新后继续保留当前的tab，同时其他的tabs状态都保存？

如题

请教一下 this.props.history.push({ pathname : '/' })
加上这个死循环了可能是什么原因？

例如列表页的新增与编辑，如果是子页面就无法打开。
感谢您的分享

Ant Tabs（pro 2.0）

本文介绍Ant Tabs一些 新增的功能和原理及思路介绍及更新日志。

实现多页签的原理及思路

Ant Tabs 基于 Ant Design Pro 2.0 基础上修改的多标签Tabs，修改此多标签也是工作上的需求，原来后台项目也是基于 Antd Design 来开发的，在 github上demo也不是很多，基本上也不符合自己的需求，于是就本着自己动手,丰衣足食的**，自己在Antd Design的基础上修改了部分文件。

但是，中间也走了很多弯路，踩了很多坑，修改了多个版本最终才成了现在的需求，不过我觉得还可以，仅供大家参考。

引入 ant Tabs

主要修改文件 react-ant/src/layouts/BasicLayout.js 中引入Tabs 组件

代码解析

constructor(props) {
    super(props);
    const {routes} = props.route,routeKey = '/home/home'; // routeKey 为设置首页设置 试试 '/dashboard/analysis' 或其他key值
    const tabLists = this.updateTree(routes);
    let tabList=[];
    tabLists.map((v) => {
      if(v.key === routeKey){
        if(tabList.length === 0){
          v.closable = false
          tabList.push(v);
        }
      }
    });
    this.state = ({
        tabList:tabList,
        tabListKey:[routeKey],
        activeKey:routeKey,
        routeKey
    })

    this.getPageTitle = memoizeOne(this.getPageTitle);
    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
  }

• tabList: 用来存储打开的多标签
• tabListKe:用来判断 tabList 是否重复保持tabList标签唯一性
• activeKey:当前激活 tab 面板的 key
• routeKey: 为设置首页设置 试试 '/dashboard/analysis' 或其他key值

updateTree = data => {
    const treeData = data;
    const treeList = [];
    // 递归获取树列表
    const getTreeList = data => {
      data.forEach(node => {
        if(!node.level){
          treeList.push({ tab: node.name, key: node.path,locale:node.locale,closable:true,content:node.component });
        }
        if (node.routes && node.routes.length > 0) { //!node.hideChildrenInMenu &&
          getTreeList(node.routes);
        }
      });
    };
    getTreeList(treeData);
    return treeList;
  };

• updateTree函数：为递归 routes 多维数据变成一维数据

 <SiderMenu
            logo={logo}
            theme={navTheme}
            onCollapse={this.handleMenuCollapse}
            menuData={menuData}
            isMobile={isMobile}
            {...this.props}
            onHandlePage ={this.onHandlePage}
          />

• onHandlePage: 点击左侧及页面内触发的函数

 {hidenAntTabs ?
              (<Authorized authority={routerConfig} noMatch={<Exception403 />}>
              {children}
                </Authorized>) :
              (this.state.tabList && this.state.tabList.length ? (
              <Tabs
                // className={styles.tabs}
                activeKey={activeKey}
                onChange={this.onChange}
                tabBarExtraContent={operations}
                tabBarStyle={{background:'#fff'}}
                tabPosition="top"
                tabBarGutter={-1}
                hideAdd
                type="editable-card"
                onEdit={this.onEdit}
              >
                {this.state.tabList.map(item => (
                  <TabPane tab={item.tab} key={item.key} closable={item.closable}>
                    <Authorized authority={routerConfig} noMatch={<Exception403 />}>
                      {/*{item.content}*/}
                      <Route key={item.key} path={item.path} component={item.content} exact={item.exact} />
                    </Authorized>
                  </TabPane>
                ))}
              </Tabs>
            ) : null)}

• hidenAntTabs：添加这个字段为在抽屉屑中控制是否显示多标签

相关链接

• Ant Tabs 源码地址
• Ant Tabs 文档地址
• Ant Tabs 更新日志

更新日志

2019-04-23

• 增加功能：增加了左侧点击出发的函数，及çonHandlePage ={this.onHandlePage}
• 增加文档：主要解释了Ant Tabs的原理及功能

2019-04-18

• 增加功能：AntTableFinder-多功能Table 深度封装 ant Table 表格

2019-04-10

• 增加功能：Tabs-支持多标签功能
• 增加功能：支持-关闭当前标签页、关闭其他标签页、关闭全部标签页
• 增加功能：拖拽组件
• 增加功能：富文本编译器
• 增加功能：支持-是否 隐藏 Ant-Tabs 功能

反馈

如果你觉得有用，对你有些帮助，欢迎给个Star😊，如果你还为明白及文中有错误，请提交Issues😊

目前遇到的问题如下

当点击table时，因为router配置的文件直接指向当前路由，不会出现任何问题，当点击分步表单时，路由会经过一次重定向，页面无法加载，并且控制台报错

想问一下大家有没有解决思路？

比如，在一个页面打印输出123，那么切换tab时，无论切换 哪个tab，这个console都会打印出来，这也就说明每个组件其实还是渲染了，请问有什么 办法进行优化吗

在某个页面通过router.push()到另一个页面的时候，地址栏路径和左边菜单栏都发生了改变，但是内容区域没有改变，也没有打开一个新的tab。

这个有什么解决方案吗？谢谢

你实现的多标签页，是如何做到切换tab的时候，页面不会重新刷新的。

也就是切换的时候，Component不会销毁，是因为你的Component都是DynamicComponent吗？

如果是这样原因的话，那我如何把Component都变成DynamicComponent。

我用的也是umi，但我的路由不是配置路由

我用umi的patchRoutes 方法处理了一下routes，然后我 设置的默认打开的tab是工作台，现在的情况是工作台的 tab已经打开了 但右边内容区没有内容，左侧菜单也没有点击的样式。请问你有什么解决的思路吗？

能不能讲一下实现多页签的 思路吗， 感谢！

我现在也实现一个需求，就是点击列表时也要多开页签，就是一个列表每条数据都有编辑功能，点击条目a的编辑要打开一个页签，点击条目b的编辑也要打开一个页签。

你好，感谢提供该模板，在学习使用中，build后部署到nginx上发现，点击左侧导航栏中，在打开的tab标签无法正常显示，一直在转圈圈，请问如何修复这个问题？在idea上调试时是没有这个问题的。

报错:
./src/routes/List/Applications.js
Module build failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null
at Array.map ()