# Migrate plugins from Grafana version 10.0.x to 10.1.x

Follow these instructions to migrate plugins from Grafana version 10.0.x to 10.1.x.

## Accessibility update for IconButton component in grafana-ui[​](#accessibility-update-for-iconbutton-component-in-grafana-ui "Direct link to Accessibility update for IconButton component in grafana-ui")

We updated the component's TypeScript interface due to an accessibility issue. This change was delivered to the core `grafana` repo with [PR 69699](https://github.com/grafana/grafana/pull/69699).

In case you are using the IconButton component in your plugin you will get TypeScript errors related to the change.

**Recommended actions:**

* Review use cases of IconButton in your plugin.
* Add a meaningful tooltip which the component will also use as an aria-label.
* Another option is to set an aria-label. In this case a tooltip will not be shown.

**Please note:** The IconButton used to have a property called `ariaLabel` which got deprecated with this change. You can now use the regular property `aria-label` instead.

## Update to React Router v6[​](#update-to-react-router-v6 "Direct link to Update to React Router v6")

Starting from Grafana 10, plugins can start using the v6 of `react-router`. Overall, `react-router` v6 aims to simplify route configuration and provide a more flexible and intuitive API for developers.

If your current plugin version needs to maintain compatibility with Grafana v9, then you can continue to use `react-router@v5` in Grafana v10. Both versions are available for plugins. However, **we strongly encourage developers to update their plugins to use the v6 version `react-router` as soon as possible**, as the v5 version is going to be deprecated in Grafana v11 and subsequently removed.

For more general information, refer to the [Official React Router v5 to v6 migration guide](https://reactrouter.com/en/main/upgrading/v5).

### Update using `@grafana/create-plugin`[​](#update-using-grafanacreate-plugin "Direct link to update-using-grafanacreate-plugin")

Follow the steps below to start using `react-router` v6 in your plugin:

#### 1. Update the build related configuration:[​](#1-update-the-build-related-configuration "Direct link to 1. Update the build related configuration:")

Enable using `react-router@v6` by setting the following feature flag in `<project-root>/.cprc.json`:

\<project-root>/.cprc.json

```json
{
  "features": {
    "useReactRouterV6": true
  }
}

```

Now update the build configuration using the create-plugin tool:

* npm
* Yarn
* pnpm

```shell
npx @grafana/create-plugin@latest update

```

```shell
yarn dlx @grafana/create-plugin@latest update

```

```shell
pnpm dlx @grafana/create-plugin@latest update

```

After updating the build configuration, it is likely that you will need to make additional updates to your plugin. To do so, follow the steps below:

#### 2. Use `<Routes>` instead of `<Switch>`[​](#2-use-routes-instead-of-switch "Direct link to 2-use-routes-instead-of-switch")

src/Routes.tsx

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

// ...

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

```

#### 3. Remove the `exact` prop from `<Route>` components[​](#3-remove-the-exact-prop-from-route-components "Direct link to 3-remove-the-exact-prop-from-route-components")

src/Routes.tsx

```typescript
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. Fix test failures with location service methods[​](#4-fix-test-failures-with-location-service-methods "Direct link to 4. Fix test failures with location service methods")

When using `locationService.replace()`, `locationService.push()`, or similar methods from `@grafana/runtime`, your tests might fail after migrating to React Router v6. Solve this by using the `<LocationServiceProvider />` component (introduced in Grafana 11.2.0) to create a provider for the location service in your tests.

test/test-utils.tsx

```typescript
import { locationService, LocationServiceProvider } from '@grafana/runtime';
import React, { useEffect, useState } from 'react';
import { Router } from 'react-router-dom';

const history = locationService.getHistory();

export function TestRoutesProvider({ children }: { children: React.ReactNode }) {
  const [location, setLocation] = useState(history.location);

  useEffect(() => {
    history.listen(setLocation);
  }, []);

  return (
    <LocationServiceProvider service={locationService}>
      <Router navigator={history} location={location}>
        {children}
      </Router>
    </LocationServiceProvider>
  );
}

```

#### 5. Follow the original `react-router` migration guide for more in-depth changes[​](#5-follow-the-original-react-router-migration-guide-for-more-in-depth-changes "Direct link to 5-follow-the-original-react-router-migration-guide-for-more-in-depth-changes")

Visit the [official react-router v5 to v6 migration guide](https://reactrouter.com/en/main/upgrading/v5) for more information.