Twilio Flex插件如何添加带有自定义路由的新选项卡

我正在使用Twilio Flex插件在react js中定制Flex ui。 我想在侧边栏中添加一个自定义链接，其中包含一个新的自定义组件，该组件具有新的路由URL，如“/shops”

在将该组件加载到该实体后，我想加载定制车间。 查看以下屏幕了解更多详细信息。

---

提前感谢您的帮助。

我找到了Twilio的这段视频，它很有帮助。

关键是向视图集合添加一个新视图，并创建一个链接到它的新侧链

import { FlexPlugin } from 'flex-plugin';
import { View, SideLink, Actions } from '@twilio/flex-ui';
import React from 'react';

export default class ShopPlugin extends FlexPlugin {
  constructor() {
    super('ShopPlugin');
  }

  init(flex, manager) {
    flex.ViewCollection.Content.add(
      <View name="shop-view" key="shop-view">
        <div>Your Shop View Goes Here</div>
      </View>
    )

    flex.SideNav.Content.add(
      <SideLink
        showLabel={true}
        icon="Thumbup"
        iconActive="ThumbupBold"
        isActive={activeView === 'shop-view'}
        onClick={() => {
          Actions.invokeAction('NavigateToView', {viewName: 'shop-view'});
        }
      >
        Shops
      </SideLink>
    )
  }
}

从'flex-plugin'导入{FlexPlugin}；
从'@twilio/flex ui'导入{视图、侧链、操作}；
从“React”导入React；
导出默认类ShopPlugin扩展FlexPlugin{
构造函数（）{
超级（“ShopPlugin”）；
}
初始化（flex，管理器）{
flex.ViewCollection.Content.add(
你的店景在这里
)
flex.SideNav.Content.add(
{
Actions.invokeAction（'NavigateToView'，{viewName:'shop view'}）；
}
>
商店
)
}
}

到目前为止，您对此做了哪些尝试？您是否已将自定义组件加载到Flex中？你跟踪了吗？