refactor react-router -> react-router-dom

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/long-eyes-confess.md

@@ -0,0 +1,38 @@
+---
+'@backstage/app-defaults': patch
+'@backstage/core-components': patch
+'@backstage/dev-utils': patch
+'@backstage/test-utils': patch
+'@backstage/plugin-airbrake': patch
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-azure-devops': patch
+'@backstage/plugin-badges': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-cloudbuild': patch
+'@backstage/plugin-code-climate': patch
+'@backstage/plugin-code-coverage': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-git-release-manager': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-kafka': patch
+'@backstage/plugin-org': patch
+'@backstage/plugin-permission-react': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-rollbar': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-search-react': patch
+'@backstage/plugin-sentry': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-todo': patch
+'@backstage/plugin-user-settings': patch
+---
+
+Internal refactor to use `react-router-dom` rather than `react-router`.

packages/app-defaults/package.json

@@ -43,7 +43,6 @@
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

packages/app/package.json

@@ -77,7 +77,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4",
     "zen-observable": "^0.10.0"

packages/app/src/App.tsx

@@ -86,7 +86,7 @@ import {
 import { AdvancedSettings } from './components/advancedSettings';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import React from 'react';
-import { Navigate, Route } from 'react-router';
+import { Navigate, Route } from 'react-router-dom';
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { homePage } from './components/home/HomePage';

packages/core-components/package.json

@@ -74,7 +74,6 @@
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

packages/core-components/src/components/Button/Button.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Button } from './Button';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
 describe('<Button />', () => {
   it('navigates using react-router', async () => {

packages/core-components/src/components/Link/Link.test.tsx

@@ -23,7 +23,7 @@ import {
 } from '@backstage/test-utils';
 import { analyticsApiRef, configApiRef } from '@backstage/core-plugin-api';
 import { isExternalUri, Link, useResolvedPath } from './Link';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
 import { ConfigReader } from '@backstage/config';
 

packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx

@@ -17,7 +17,7 @@
 import React, { PropsWithChildren } from 'react';
 import { GaugeCard } from './GaugeCard';
 import Grid from '@material-ui/core/Grid';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import Tooltip from '@material-ui/core/Tooltip';
 import Info from '@material-ui/icons/Info';
 

packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx

@@ -17,7 +17,7 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { RoutedTabs } from './RoutedTabs';
 
 const testRoute1 = {

packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx

@@ -15,7 +15,12 @@
  */
 import React, { useMemo } from 'react';
 import { Helmet } from 'react-helmet';
-import { matchRoutes, useNavigate, useParams, useRoutes } from 'react-router';
+import {
+  matchRoutes,
+  useNavigate,
+  useParams,
+  useRoutes,
+} from 'react-router-dom';
 import { Content } from '../../layout/Content';
 import { HeaderTabs } from '../../layout/HeaderTabs';
 import { SubRoute } from './types';

packages/core-components/src/components/TabbedLayout/TabbedLayout.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { PropsWithChildren } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { TabbedLayout } from './TabbedLayout';
 
 export default {

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -19,7 +19,7 @@ import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Link } from '../../components/Link';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';

packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx

@@ -17,7 +17,7 @@
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import React, { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { InfoCard, Props } from './InfoCard';
 
 export default {

packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx

@@ -21,7 +21,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Button } from '../../components';
 import { ItemCardGrid } from './ItemCardGrid';
 import { ItemCardHeader } from './ItemCardHeader';

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -26,7 +26,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import MenuIcon from '@material-ui/icons/Menu';
 import { orderBy } from 'lodash';
 import React, { createContext, useEffect, useState, useContext } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { SidebarOpenStateProvider } from './SidebarOpenStateContext';
 import { SidebarGroup } from './SidebarGroup';
 import { SidebarConfigContext, SidebarConfig } from './config';

packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx

@@ -16,7 +16,7 @@
 
 import Grid from '@material-ui/core/Grid';
 import React, { PropsWithChildren, useState } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { CardTab, TabbedCard } from './TabbedCard';
 
 const cardContentStyle = { height: 200, width: 500 };

packages/dev-utils/package.json

@@ -53,7 +53,6 @@
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

packages/dev-utils/src/devApp/render.tsx

@@ -46,7 +46,7 @@ import { Box } from '@material-ui/core';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
 import React, { ComponentType, ReactNode } from 'react';
 import ReactDOM from 'react-dom';
-import { createRoutesFromChildren, Route } from 'react-router';
+import { createRoutesFromChildren, Route } from 'react-router-dom';
 import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 
 export function isReactRouterBeta(): boolean {

packages/techdocs-cli-embedded-app/package.json

@@ -25,7 +25,6 @@
     "history": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4"
   },

packages/techdocs-cli-embedded-app/src/App.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Navigate, Route } from 'react-router';
+import { Navigate, Route } from 'react-router-dom';
 
 import {
   DefaultTechDocsHome,

packages/test-utils/package.json

@@ -52,7 +52,6 @@
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

packages/test-utils/src/testUtils/appWrappers.test.tsx

@@ -26,7 +26,7 @@ import {
 import { withLogCollector } from './logCollector';
 import { render } from '@testing-library/react';
 import React, { useEffect } from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { MockErrorApi } from './apis';
 import { renderInTestApp, wrapInTestApp } from './appWrappers';
 import { TestApiProvider } from './TestApiProvider';

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, ReactNode, ReactElement } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Route } from 'react-router-dom';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core/styles';

plugins/airbrake/package.json

@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/app-defaults": "workspace:^",

plugins/airbrake/src/extensions.test.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { EntityAirbrakeContent } from './extensions';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { airbrakeApiRef, MockAirbrakeApi } from './api';
 import { createEntity } from './api';

plugins/api-docs/package.json

@@ -52,7 +52,6 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { ApiExplorerPage } from './ApiExplorerPage';
 
 jest.mock('react-router', () => ({

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import {
   DefaultApiExplorerPage,
   DefaultApiExplorerPageProps,

plugins/azure-devops/package.json

@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/azure-devops/src/components/BuildTable/BuildTable.stories.tsx

@@ -21,7 +21,7 @@ import {
 } from '@backstage/plugin-azure-devops-common';
 
 import { BuildTable } from './BuildTable';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import React from 'react';
 
 export default {

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.stories.tsx

@@ -22,7 +22,7 @@ import {
   PullRequestVoteStatus,
 } from '@backstage/plugin-azure-devops-common';
 
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { PullRequestCard } from './PullRequestCard';
 import React from 'react';
 

plugins/badges/package.json

@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/badges/src/api/BadgesClient.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { generatePath } from 'react-router';
+import { generatePath } from 'react-router-dom';
 import { ResponseError } from '@backstage/errors';
 import { Entity, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { BadgesApi, BadgeSpec } from './types';

plugins/catalog-graph/package.json

@@ -40,7 +40,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -29,7 +29,7 @@ import {
 import { makeStyles, Theme } from '@material-ui/core';
 import qs from 'qs';
 import React, { MouseEvent, useCallback } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { catalogGraphRouteRef } from '../../routes';
 import {
   ALL_RELATION_PAIRS,

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx

@@ -32,7 +32,7 @@ import FilterListIcon from '@material-ui/icons/FilterList';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import { ToggleButton } from '@material-ui/lab';
 import React, { MouseEvent, useCallback } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   ALL_RELATION_PAIRS,
   Direction,

plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.ts

@@ -15,7 +15,7 @@
  */
 import { RELATION_MEMBER_OF } from '@backstage/catalog-model';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { useLocation as useLocationMocked } from 'react-router';
+import { useLocation as useLocationMocked } from 'react-router-dom';
 import { Direction } from '../EntityRelationsGraph';
 import { useCatalogGraphPage } from './useCatalogGraphPage';
 

plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.ts

@@ -27,7 +27,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import usePrevious from 'react-use/lib/usePrevious';
 import { Direction } from '../EntityRelationsGraph';
 

plugins/catalog-import/package.json

@@ -56,7 +56,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/catalog-import/src/components/ImportPage/ImportPage.test.tsx

@@ -21,7 +21,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { catalogImportApiRef, CatalogImportClient } from '../../api';
 import { ImportPage } from './ImportPage';
 

plugins/catalog-import/src/components/ImportPage/ImportPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { DefaultImportPage } from '../DefaultImportPage';
 
 /**

plugins/catalog-react/package.json

@@ -59,7 +59,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx

@@ -30,7 +30,7 @@ import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { Box, DialogContentText, makeStyles } from '@material-ui/core';
 import classNames from 'classnames';
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { catalogApiRef } from '../../../api';
 import { humanizeEntityRef } from '../../EntityRefLink';

plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx

@@ -28,7 +28,7 @@ import { MockStorageApi, TestApiProvider } from '@backstage/test-utils';
 import { act, renderHook } from '@testing-library/react-hooks';
 import qs from 'qs';
 import React, { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { catalogApiRef } from '../api';
 import { starredEntitiesApiRef, MockStarredEntitiesApi } from '../apis';
 import { EntityKindPicker, UserListPicker } from '../components';

plugins/catalog-react/src/hooks/useEntityListProvider.tsx

@@ -25,7 +25,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';

plugins/catalog/package.json

@@ -57,7 +57,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Outlet } from 'react-router';
+import { Outlet } from 'react-router-dom';
 import { AsyncEntityProvider } from '@backstage/plugin-catalog-react';
 import { useEntityFromUrl } from './useEntityFromUrl';
 

plugins/catalog/src/components/CatalogEntityPage/useEntityFromUrl.ts

@@ -25,7 +25,7 @@ import {
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 
 export const useEntityFromUrl = (): EntityLoadingStatus => {

plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { CatalogPage } from './CatalogPage';
 
 jest.mock('react-router', () => ({

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import {
   DefaultCatalogPage,
   DefaultCatalogPageProps,

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -47,7 +47,7 @@ import {
 import { Box, TabProps } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 
 /** @public */

plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx

@@ -18,7 +18,7 @@ import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Alert } from '@material-ui/lab';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { DeleteEntityDialog } from './DeleteEntityDialog';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';

plugins/circleci/package.json

@@ -49,7 +49,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/circleci/src/components/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Routes, Route } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { circleCIBuildRouteRef } from '../route-refs';
 import { BuildWithStepsPage } from './BuildWithStepsPage/';
 import { BuildsPage } from './BuildsPage';

plugins/cloudbuild/package.json

@@ -47,7 +47,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/cloudbuild/src/components/Router.tsx

@@ -16,7 +16,7 @@
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Routes, Route } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { buildRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';

plugins/code-climate/package.json

@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/code-coverage/package.json

@@ -41,7 +41,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/explore/package.json

@@ -51,7 +51,6 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/explore/src/components/ExplorePage/ExplorePage.test.tsx

@@ -16,7 +16,7 @@
 
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { ExplorePage } from './ExplorePage';
 
 jest.mock('react-router', () => ({

plugins/explore/src/components/ExplorePage/ExplorePage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { DefaultExplorePage } from '../DefaultExplorePage';
 
 export const ExplorePage = () => {

plugins/git-release-manager/package.json

@@ -39,7 +39,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/git-release-manager/src/features/RepoDetailsForm/Owner.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import {
   FormControl,

plugins/git-release-manager/src/features/RepoDetailsForm/Repo.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   FormControl,
   FormHelperText,

plugins/git-release-manager/src/features/RepoDetailsForm/VersioningStrategy.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   FormControl,
   FormControlLabel,

plugins/git-release-manager/src/hooks/useQueryHandler.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import qs from 'qs';
 
 import { Project } from '../contexts/ProjectContext';

plugins/github-actions/package.json

@@ -49,7 +49,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/github-actions/src/components/Router.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Routes, Route } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { buildRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';

plugins/home/package.json

@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/home/src/components/HomepageCompositionRoot.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 
 export const HomepageCompositionRoot = (props: {
   title?: string;

plugins/jenkins/package.json

@@ -48,7 +48,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/jenkins/src/components/Router.tsx

@@ -18,7 +18,7 @@ import { Entity } from '@backstage/catalog-model';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { JENKINS_ANNOTATION, LEGACY_JENKINS_ANNOTATION } from '../constants';
 import { buildRouteRef } from '../plugin';
 import { CITable } from './BuildsPage/lib/CITable';

plugins/kafka/package.json

@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/kafka/src/Router.tsx

@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { KAFKA_CONSUMER_GROUP_ANNOTATION } from './constants';
 import { KafkaTopicsForConsumer } from './components/ConsumerGroupOffsets/ConsumerGroupOffsets';

plugins/org/package.json

@@ -43,7 +43,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx

@@ -19,7 +19,7 @@ import { catalogApiRef, EntityProvider } from '@backstage/plugin-catalog-react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { Grid } from '@material-ui/core';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { MembersListCard } from './MembersListCard';
 
 export default {

plugins/permission-react/package.json

@@ -41,7 +41,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/permission-react/src/components/PermissionedRoute.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ReactElement, ReactNode } from 'react';
-import { Route } from 'react-router';
+import { Route } from 'react-router-dom';
 import { useApp } from '@backstage/core-plugin-api';
 import { usePermission } from '../hooks';
 import {

plugins/playlist/package.json

@@ -48,7 +48,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/playlist/src/components/Router/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Routes, Route } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 
 import { playlistRouteRef } from '../../routes';
 import { PlaylistIndexPage } from '../PlaylistIndexPage';

plugins/playlist/src/hooks/usePlaylistList.test.tsx

@@ -25,7 +25,7 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { act, renderHook } from '@testing-library/react-hooks';
 import qs from 'qs';
 import React, { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { PlaylistApi, playlistApiRef } from '../api';
 import {
   DefaultSortCompareFunctions,

plugins/playlist/src/hooks/usePlaylistList.tsx

@@ -26,7 +26,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';

plugins/rollbar/package.json

@@ -47,7 +47,6 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/rollbar/src/components/Router.tsx

@@ -17,7 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { ROLLBAR_ANNOTATION } from '../constants';
 import { EntityPageRollbar } from './EntityPageRollbar/EntityPageRollbar';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';

plugins/scaffolder/package.json

@@ -81,7 +81,6 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/scaffolder/src/components/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, useEffect } from 'react';
-import { Navigate, Route, Routes, useOutlet } from 'react-router';
+import { Navigate, Route, Routes, useOutlet } from 'react-router-dom';
 import { Entity } from '@backstage/catalog-model';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { ScaffolderPage } from './ScaffolderPage';

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx

@@ -27,7 +27,7 @@ import Edit from '@material-ui/icons/Edit';
 import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   actionsRouteRef,
   editRouteRef,

plugins/scaffolder/src/components/TaskPage/TaskPage.tsx

@@ -45,7 +45,7 @@ import classNames from 'classnames';
 import { DateTime, Interval } from 'luxon';
 import qs from 'qs';
 import React, { memo, useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import useInterval from 'react-use/lib/useInterval';
 import {
   rootRouteRef,

plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx

@@ -21,7 +21,7 @@ import {
 } from '@backstage/test-utils';
 import { act, fireEvent, screen, within } from '@testing-library/react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { scaffolderApiRef } from '../../api';
 import { ScaffolderApi } from '../../types';
 import { rootRouteRef } from '../../routes';

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -17,7 +17,7 @@ import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import qs from 'qs';
 import React, { ComponentType, useCallback, useContext, useState } from 'react';
-import { Navigate, useNavigate } from 'react-router';
+import { Navigate, useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { scaffolderApiRef } from '../../api';
 import { FieldExtensionOptions } from '../../extensions';

plugins/scaffolder/src/next/Router/Router.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { PropsWithChildren } from 'react';
-import { Routes, Route, useOutlet } from 'react-router';
+import { Routes, Route, useOutlet } from 'react-router-dom';
 import { TemplateListPage } from '../TemplateListPage';
 import { TemplateWizardPage } from '../TemplateWizardPage';
 import {

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -23,7 +23,7 @@ import {
   MarkdownContent,
 } from '@backstage/core-components';
 import { NextFieldExtensionOptions } from '../../extensions';
-import { Navigate, useNavigate } from 'react-router';
+import { Navigate, useNavigate } from 'react-router-dom';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import {
   AnalyticsContext,

plugins/search-react/package.json

@@ -47,7 +47,7 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx

@@ -22,7 +22,7 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import FindInPageIcon from '@material-ui/icons/FindInPage';
 import GroupIcon from '@material-ui/icons/Group';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { DefaultResultListItem } from './DefaultResultListItem';
 
 export default {

plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 import { List, ListItem } from '@material-ui/core';
 import DefaultIcon from '@material-ui/icons/InsertDriveFile';

plugins/search/package.json

@@ -52,7 +52,6 @@
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {

plugins/search/src/components/SearchPage/SearchPage.test.tsx

@@ -16,7 +16,7 @@
 
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { useSearch } from '@backstage/plugin-search-react';
 import { SearchPage } from './SearchPage';
 

plugins/search/src/components/SearchPage/SearchPage.tsx

@@ -17,7 +17,7 @@
 import React, { useEffect } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 import qs from 'qs';
-import { useLocation, useOutlet } from 'react-router';
+import { useLocation, useOutlet } from 'react-router-dom';
 import {
   SearchContextProvider,
   useSearch,

plugins/sentry/package.json

@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
-    "react-router": "6.0.0-beta.0 || ^6.3.0"
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

plugins/sentry/src/components/Router.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { SentryIssuesWidget } from './SentryIssuesWidget';
 
 /** @public */