6.2. 为新插件页面定义动态路由


流程

  1. 通过指定一个唯一 路径 来定义每个路由,如果需要,则指定 importName (如果它 与默认 导出不同)。
  2. 通过配置 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: ...
    Copy to Clipboard Toggle word wrap

    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
};
Copy to Clipboard Toggle word wrap

指定自定义 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
Copy to Clipboard Toggle word wrap

返回顶部
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务,以及可以信赖的内容,帮助红帽用户创新并实现他们的目标。 了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情,请参阅红帽博客.

關於紅帽

我们提供强化的解决方案,使企业能够更轻松地跨平台和环境(从核心数据中心到网络边缘)工作。

Theme

© 2025 Red Hat