6.2. 为新插件页面定义动态路由
流程
-
通过指定一个唯一
路径来定义每个路由,如果需要,则指定importName(如果它与默认导出不同)。 通过配置
dynamicRoutes,在动态插件中公开其他路由,如下例所示:# dynamic-plugins-config.yaml plugins: - plugin: <plugin_path_or_url> disabled: false pluginConfig: dynamicPlugins: frontend: my-plugin: # The plugin package name dynamicRoutes: # The unique path in the application. The path cannot override existing routes except the `/` home route. - path: /my-plugin # (Optional): The set of assets to access within the plugin. If not specified, the system uses the `PluginRoot` module. module: CustomModule # (Optional): The component name as a standalone page. If not specified, the system uses the `default` export. importName: FooPluginPage # Allows you to extend the main sidebar navigation and point to a new route. menuItem: icon: fooIcon text: Foo Plugin Page enabled: false config: # (Optional): Passes `props` to a custom sidebar item props: ...menuItem接受以下属性:-
文本:显示给用户的标签。 -
图标: Backstage system 图标名称。 -
Enabled: 可选:允许用户在侧边栏设置为 false 时从侧边栏中删除 menuItem。 importName:指定导出的SidebarItem组件的可选名称。要配置自定义
SidebarItem以增强通知徽标等体验,请确保组件接受以下属性:
-
export type MySidebarItemProps = {
to: string; // supplied by the sidebar during rendering, this will be the path configured for the dynamicRoute
};
指定自定义 SidebarItem 组件示例:
# dynamic-plugins-config.yaml
plugins:
- plugin: <plugin_path_or_url>
disabled: false
pluginConfig:
dynamicPlugins:
frontend:
my-dynamic-plugin-package-name:
dynamicRoutes:
- importName: CustomPage
menuItem:
config:
props:
text: Click Me!
importName: SimpleSidebarItem
path: /custom_page