Merge pull request #15127 from backstage/rugvip/rrd

Replace usages of react-router with react-router-dom

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,11 +16,11 @@
 
 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', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn().mockReturnValue('Route Children'),
 }));
 

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.test.tsx

@@ -29,8 +29,8 @@ import { CatalogGraphPage } from './CatalogGraphPage';
 
 const navigate = jest.fn();
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => navigate,
 }));
 

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,11 +15,11 @@
  */
 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';
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
   useLocation: jest.fn(),
 }));
 

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,12 +21,12 @@ 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';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn(),
 }));
 

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,11 +17,11 @@
 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', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn().mockReturnValue('Route Children'),
 }));
 

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,11 +16,11 @@
 
 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', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn().mockReturnValue({
     search: '',
   }),

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.test.tsx

@@ -27,7 +27,7 @@ import { useProjectContext } from '../../contexts/ProjectContext';
 import { Owner } from './Owner';
 import { mockApiClient } from '../../test-helpers/mock-api-client';
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
   useLocation: jest.fn(() => ({
     search: mockSearchCalver,

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.test.tsx

@@ -26,7 +26,7 @@ import { Repo } from './Repo';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useProjectContext } from '../../contexts/ProjectContext';
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
   useLocation: jest.fn(() => ({
     search: mockSearchCalver,

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.test.tsx

@@ -25,7 +25,7 @@ import { VersioningStrategy } from './VersioningStrategy';
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
   useLocation: jest.fn(() => ({
     search: mockSearchCalver,

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.test.tsx

@@ -20,7 +20,7 @@ import { render } from '@testing-library/react';
 import { mockSearchSemver } from '../test-helpers/test-helpers';
 import { useQueryHandler } from './useQueryHandler';
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
   useLocation: jest.fn(() => ({
     search: mockSearchSemver,
   })),

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,12 +16,12 @@
 
 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';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn().mockReturnValue({
     search: '',
   }),

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 */

plugins/shortcuts/package.json

@@ -38,7 +38,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/shortcuts/src/AddShortcut.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { SubmitHandler } from 'react-hook-form';
 import {
   Button,

plugins/techdocs/package.json

@@ -61,7 +61,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": {

plugins/techdocs/src/home/components/TechDocsIndexPage.test.tsx

@@ -16,11 +16,11 @@
 
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { TechDocsIndexPage } from './TechDocsIndexPage';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn().mockReturnValue('Route Children'),
 }));
 

plugins/techdocs/src/home/components/TechDocsIndexPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { TableColumn, TableProps } from '@backstage/core-components';
 import { UserListFilterKind } from '@backstage/plugin-catalog-react';
 import { DefaultTechDocsHome } from './DefaultTechDocsHome';

plugins/techdocs/src/search/components/TechDocsSearch.tsx

@@ -23,7 +23,7 @@ import {
 } from '@backstage/plugin-search-react';
 import { makeStyles, Paper } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 
 const useStyles = makeStyles(theme => ({

plugins/todo/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/todo/src/plugin.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { todoPlugin, EntityTodoContent } from './plugin';
 import { todoApiRef } from './api';

plugins/user-settings/package.json

@@ -47,7 +47,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/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx

@@ -18,11 +18,11 @@ import React from 'react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import { DefaultSettingsPage } from './DefaultSettingsPage';
 import { UserSettingsTab } from '../UserSettingsTab';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { SettingsLayout } from '../SettingsLayout';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn().mockReturnValue(undefined),
 }));
 

plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx

@@ -18,13 +18,13 @@ import React from 'react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import { SettingsPage } from './SettingsPage';
 import { UserSettingsTab } from '../UserSettingsTab';
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import { SettingsLayout } from '../SettingsLayout';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useOutlet: jest.fn().mockReturnValue(undefined),
 }));
 

plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useOutlet } from 'react-router';
+import { useOutlet } from 'react-router-dom';
 import React from 'react';
 import { DefaultSettingsPage } from '../DefaultSettingsPage';
 import { useElementFilter } from '@backstage/core-plugin-api';