Twilio Flex 插件如何使用自定义路由添加新选项卡

Question

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

在该主体中加载该组件后，我想加载自定义商店。查看以下屏幕以了解更多详细信息。

预先感谢您的帮助。

Answer 1

我找到了 Twilio 的这个视频，这很有帮助。 https://www.youtube.com/watch?v=ZMjKMoy1RPc

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

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>
    )
  }
}