将插件从 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
1. 更新构建相关配置:
通过在 <project-root>/.cprc.json
中设置以下功能标志来启用使用 react-router@v6
{
"features": {
"useReactRouterV6": true
}
}
现在使用 create-plugin 工具更新构建配置
- npm
- Yarn
- pnpm
npx @grafana/create-plugin@latest update
yarn dlx @grafana/create-plugin@latest update
pnpm dlx @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 官方迁移指南 以获取更多信息。