App plugin: Update to react-router v6

[leventebalogh]

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.

Why?

We are going to deprecate using react-router v5 in plugins from Grafana 11, and we would like to make sure our internal app plugins are using the v6 version by the time we finish migrating Grafana core itself.

How?

We have created a migration guide for plugins (please see the links below), and also don't hesitate to reach out in #grafana-plugins-platform in Slack in case you have any questions.

• Install react-router-dom-v5-compat

• Use v6 <Routes /> and <Route />

• Use v6 hooks instead of v5 hooks

• Wait for scenes

• Change dependency from react-router-dom-v5-compat to react-router-dom@6

• Update .cprc.json ("useReactRouterV6": true)

• Update test setup for render (perhaps we still need to use the Compat setup?)

• How to migrate a Grafana app plugin to react-router v6

• Official React Router v5 to v6 migration guide

• Community topic

[The-9880]

FYI @rdubrock it looks like there aren't any deadlines for this yet (ref) so I backlogged it - feel free to pull into a cycle at your discretion!

[rdubrock]

Doing this depends on scenes also moving to v6 => grafana/scenes#608

[peterschretlen]

@grafanaman has done some of this work, but have not yet jumped to v6.

[peterschretlen]

I think we are still waiting on grafana/scenes#608 before we do the update.

[w1kman]

@grafanaman has done some of this work, but have not yet jumped to v6.

We're using react-router-dom-v5-compat, the migration work for v6 has been done because we have no dependencies on v5 (except for some tests).

I think we are still waiting on grafana/scenes#608 before we do the update.

When this is merged, we could officially bundle with v6 (which technically is react-router-dom-v5-compat).

[w1kman]

I've updated the issue description to reflect what has been done and that we're waiting for grafana/scenes#608 to be merged before we do anything else.