React Router >6.3 - Error: useRoutes() may be used only in the context of a <Router> component

[malte-behrendt-gr]

Thanks for the great plugin!

However, with updated dependencies "/announcements" crashes.

Reproduction steps

1. Update dependencies, e.g. with "react-router-dom": "^6.3.0" -> installs 6.7
2. Navigate to "/announcements"
3. Get an error page

Error
useRoutes() may be used only in the context of a <Router> component.
Call Stack
 invariant
  node_modules/react-router/index.js:71:20
 useRoutes
  node_modules/react-router/index.js:675:35
 Routes
  node_modules/react-router/index.js:922:10
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:14985:18
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:17811:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:19049:16
 HTMLUnknownElement.callCallback
  node_modules/react-dom/cjs/react-dom.development.js:3945:14
 Object.invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:3994:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:4056:31
 beginWork$1
  node_modules/react-dom/cjs/react-dom.development.js:23959:7

useRoutes() may be used only in the context of a <Router> component.

Workaround

In root package.json, add a resolution for react-router-dom:

{
  "resolutions": {
      "@types/react": "^17",
      "@types/react-dom": "^17",
      "@backstage/core-components": "^0.12.3",
      "@backstage/backend-common": "^0.18.1",
      "react-router-dom": "~6.3.0"
    }
  }

Suspected cause

import { Routes, Route } from 'react-router'; in Router.tsx should be import { Routes, Route } from 'react-router-dom';

[K-Phoen]

Thanks for reporting this, #90 should help :)