ant.design使用组件Tabs切换路由，发现echarts

问题描述：
tabs切换路由，默认进入第一个界面echarts图表能渲染成功，但是切换至第二个界面时，echarts渲染图表不成功，是一片空白。刷新当前路径，图表能渲染，但是切换至第一界面再切回，又是一片空白。

尝试解决方法：

• 打开控制台，找到渲染的div(可确定div有固定的宽高)，发现div上没有渲染的canvas,可以确定echarts实例化未成功；

  
  无canvas.png
• 在echarts实例化后打印dom,发现dom上有渲染的echarts实例。

• 结果发现界面渲染多次，次数小于或等于tabs标签页的页数，再次打开调试器的elements，发现有两个相同的div，都渲染echarts图表，前面隐藏的div有echarts实例。

  
  未渲染上的div层.png

渲染上的div层.png

ant.design的tabs组件有缓存机制，echarts渲染实例的时候先渲染了缓存中的dom，所以我们的界面再次渲染时，由于已存在一个实例而渲染不成功。

解决方法：

 <Tabs defaultActiveKey={activeKey}  onChange={this.changeRoute}>
    {tabsArr.map(tabpane => (
       <TabPane
           tab={<span><Icon type={tabpane.icon} />{tabpane.title}</span>}
           key={tabpane.key}
       >
           <Switch>
              {getRoutes(match.path, routerData).map(item => (
                   <Route
                        key={item}
                        path={item.path}
                        component={item.component}
                        exact={item.exact}
                   />
             ))}
           </Switch>
       </TabPane>
    ))}
</Tabs>

把路由加载那部分提出来，不放在 tabs里面，代码改成下面这样即可。

修改后代码.png