跳转到主要内容

将插件从 Grafana 版本 10.0.x 迁移到 10.1.x

按照以下说明将插件从 Grafana 版本 10.0.x 迁移到 10.1.x。

在 grafana-ui 中的 IconButton 组件的访问性更新​

由于访问性问题，我们更新了组件的 TypeScript 接口。这次更改已通过 PR 69699 交付到核心 grafana 仓库。

如果您在插件中使用 IconButton 组件，您将收到与更改相关的 TypeScript 错误。

建议的操作

  • 审查您插件中 IconButton 的用例。
  • 添加一个有意义的工具提示，该工具提示也将用作 aria-label。
  • 另一个选项是设置 aria-label。在这种情况下，不会显示工具提示。

请注意：IconButton 之前有一个名为 ariaLabel 的属性，该属性在此更改中被弃用。您现在可以使用常规属性 aria-label。

更新到 React Router v6​

从 Grafana 10 开始，插件可以开始使用 react-router 的 v6 版本。总体而言，react-router v6 旨在简化路由配置并提供更灵活、更直观的 API 以供开发者使用。

如果您的当前插件版本需要与 Grafana v9 保持兼容性，则您可以在 Grafana v10 中继续使用 react-router@v5。这两个版本都可用于插件。然而，我们强烈建议开发者在可能的情况下尽快将插件更新为使用 v6 版本的 react-router，因为 v5 版本将在 Grafana v11 中被弃用，并随后被移除。

有关更多信息，请参阅 官方 React Router v5 到 v6 迁移指南。

使用 @grafana/create-plugin 更新​

按照以下步骤开始在使用插件中启用 react-router v6

通过在 <project-root>/.cprc.json 中设置以下功能标志来启用使用 react-router@v6

{
  "features": {
    "useReactRouterV6": true
  }
}

现在使用 create-plugin 工具更新构建配置

npx @grafana/create-plugin@latest update

更新构建配置后，您可能需要进一步更新您的插件。为此，请按照以下步骤操作

2. 使用 <Routes> 而不是 <Switch>：​

// Using <Routes> instead of <Switch> in `react-router` v6
import { Routes } from 'react-router-dom';

// ...

return (
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
);

3. 从 <Route> 组件中移除 exact 属性：​

return (
  <Routes>
    {/* BAD (Until v5) */}
    <Route exact path="/" element={<Home />} />

    {/* GOOD (From v6) */}
    {/* (Routes are "exact" by default, you need to use the "*" to match sub-routes) */}
    <Route path="/" element={<Home />} />
  </Routes>
);

4. 按照原始的 react-router 迁移指南进行更深入的变化：​

有关更多信息，请访问官方 react-router v5 到 v6 迁移指南。