跳到主要内容

将插件从 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 开始,插件可以开始使用 v6 版本的 react-router。总体而言,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 官方迁移指南 以获取更多信息。