diff --git a/packages/app/package.json b/packages/app/package.json
index 15681d0548..6b5c5b4e78 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -22,7 +22,7 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.12.21",
- "react-router-dom": "^5.2.0",
+ "react-router-dom": "6.0.0-alpha.5",
"react-use": "^14.2.0",
"zen-observable": "^0.8.15"
},
@@ -34,7 +34,6 @@
"@types/jest": "^25.2.2",
"@types/jquery": "^3.3.34",
"@types/node": "^12.0.0",
- "@types/react-router-dom": "^5.1.3",
"@types/zen-observable": "^0.8.0",
"cross-env": "^7.0.0",
"cypress": "^4.2.0",
diff --git a/packages/cli/templates/default-app/packages/app/package.json.hbs b/packages/cli/templates/default-app/packages/app/package.json.hbs
index 2c35dee754..46e27c5b91 100644
--- a/packages/cli/templates/default-app/packages/app/package.json.hbs
+++ b/packages/cli/templates/default-app/packages/app/package.json.hbs
@@ -1,53 +1,53 @@
{
- "name": "app",
- "version": "0.0.0",
- "private": true,
- "dependencies": {
- "@material-ui/core": "^4.9.1",
- "@material-ui/icons": "^4.9.1",
- "@material-ui/lab": "4.0.0-alpha.45",
- "@backstage/cli": "^{{version}}",
- "@backstage/core": "^{{version}}",
- "@backstage/theme": "^{{version}}",
- "plugin-welcome": "0.0.0",
- "react": "^16.13.1",
- "react-dom": "^16.13.1",
- "react-router-dom": "^5.2.0",
- "react-use": "^14.2.0"
- },
- "devDependencies": {
- "@testing-library/jest-dom": "^5.7.0",
- "@testing-library/react": "^9.3.2",
- "@testing-library/user-event": "^10.2.4",
- "@types/jest": "^25.2.2",
- "@types/node": "^12.0.0",
- "@types/react-router-dom": "^5.1.3",
- "@types/testing-library__jest-dom": "^5.0.4",
- "cross-env": "^7.0.0",
- "cypress": "^4.2.0",
- "eslint-plugin-cypress": "^2.10.3",
- "start-server-and-test": "^1.10.11"
- },
- "scripts": {
- "start": "backstage-cli app:serve",
- "bundle": "backstage-cli app:build",
- "test": "backstage-cli test",
- "lint": "backstage-cli lint",
- "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev",
- "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run",
- "cy:dev": "cypress open",
- "cy:run": "cypress run"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
+"name": "app",
+"version": "0.0.0",
+"private": true,
+"dependencies": {
+"@material-ui/core": "^4.9.1",
+"@material-ui/icons": "^4.9.1",
+"@material-ui/lab": "4.0.0-alpha.45",
+"@backstage/cli": "^{{version}}",
+"@backstage/core": "^{{version}}",
+"@backstage/theme": "^{{version}}",
+"plugin-welcome": "0.0.0",
+"react": "^16.13.1",
+"react-dom": "^16.13.1",
+"react-router-dom": "6.0.0-alpha.5",
+"react-use": "^14.2.0"
+},
+"devDependencies": {
+"@testing-library/jest-dom": "^5.7.0",
+"@testing-library/react": "^9.3.2",
+"@testing-library/user-event": "^10.2.4",
+"@types/jest": "^25.2.2",
+"@types/node": "^12.0.0",
+"@types/react-router-dom": "6.0.0-alpha.5",
+"@types/testing-library__jest-dom": "^5.0.4",
+"cross-env": "^7.0.0",
+"cypress": "^4.2.0",
+"eslint-plugin-cypress": "^2.10.3",
+"start-server-and-test": "^1.10.11"
+},
+"scripts": {
+"start": "backstage-cli app:serve",
+"bundle": "backstage-cli app:build",
+"test": "backstage-cli test",
+"lint": "backstage-cli lint",
+"test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev",
+"test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run",
+"cy:dev": "cypress open",
+"cy:run": "cypress run"
+},
+"browserslist": {
+"production": [
+">0.2%",
+"not dead",
+"not op_mini all"
+],
+"development": [
+"last 1 chrome version",
+"last 1 firefox version",
+"last 1 safari version"
+]
+}
}
diff --git a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs
index b18839bab6..42676f56ee 100644
--- a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs
+++ b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs
@@ -1,39 +1,39 @@
{
- "name": "plugin-welcome",
- "version": "0.0.0",
- "main": "dist/index.esm.js",
- "main:src": "src/index.ts",
- "types": "src/index.ts",
- "private": true,
- "scripts": {
- "build": "backstage-cli plugin:build",
- "start": "backstage-cli plugin:serve",
- "lint": "backstage-cli lint",
- "test": "backstage-cli test",
- "diff": "backstage-cli plugin:diff",
- "prepack": "backstage-cli prepack",
- "postpack": "backstage-cli postpack",
- "clean": "backstage-cli clean"
- },
- "dependencies": {
- "@backstage/core": "^{{version}}",
- "@backstage/theme": "^{{version}}",
- "@material-ui/core": "^4.9.1",
- "@material-ui/icons": "^4.9.1",
- "react": "^16.13.1",
- "react-dom": "^16.13.1",
- "react-use": "^14.2.0",
- "react-router-dom": "^5.2.0"
- },
- "devDependencies": {
- "@backstage/cli": "^{{version}}",
- "@backstage/dev-utils": "^{{version}}",
- "@testing-library/jest-dom": "^5.7.0",
- "@testing-library/react": "^9.3.2",
- "@types/testing-library__jest-dom": "^5.0.4",
- "jest-fetch-mock": "^3.0.3"
- },
- "files": [
- "dist/**/*.{js,d.ts}"
- ]
+"name": "plugin-welcome",
+"version": "0.0.0",
+"main": "dist/index.esm.js",
+"main:src": "src/index.ts",
+"types": "src/index.ts",
+"private": true,
+"scripts": {
+"build": "backstage-cli plugin:build",
+"start": "backstage-cli plugin:serve",
+"lint": "backstage-cli lint",
+"test": "backstage-cli test",
+"diff": "backstage-cli plugin:diff",
+"prepack": "backstage-cli prepack",
+"postpack": "backstage-cli postpack",
+"clean": "backstage-cli clean"
+},
+"dependencies": {
+"@backstage/core": "^{{version}}",
+"@backstage/theme": "^{{version}}",
+"@material-ui/core": "^4.9.1",
+"@material-ui/icons": "^4.9.1",
+"react": "^16.13.1",
+"react-dom": "^16.13.1",
+"react-use": "^14.2.0",
+"react-router-dom": "6.0.0-alpha.5"
+},
+"devDependencies": {
+"@backstage/cli": "^{{version}}",
+"@backstage/dev-utils": "^{{version}}",
+"@testing-library/jest-dom": "^5.7.0",
+"@testing-library/react": "^9.3.2",
+"@types/testing-library__jest-dom": "^5.0.4",
+"jest-fetch-mock": "^3.0.3"
+},
+"files": [
+"dist/**/*.{js,d.ts}"
+]
}
diff --git a/packages/core-api/package.json b/packages/core-api/package.json
index 8139f2c54a..aa88fb1aeb 100644
--- a/packages/core-api/package.json
+++ b/packages/core-api/package.json
@@ -34,7 +34,7 @@
"@types/react": "^16.9",
"prop-types": "^15.7.2",
"react": "^16.12.0",
- "react-router-dom": "^5.2.0",
+ "react-router-dom": "6.0.0-alpha.5",
"react-use": "^14.2.0",
"zen-observable": "^0.8.15"
},
diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx
index 575dcfc59d..e47aa545ab 100644
--- a/packages/core-api/src/app/App.tsx
+++ b/packages/core-api/src/app/App.tsx
@@ -15,7 +15,7 @@
*/
import React, { ComponentType, FC } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Route, Redirect, Routes, Navigate } from 'react-router-dom';
import { AppContextProvider } from './AppContext';
import { BackstageApp, AppComponents, AppConfigLoader } from './types';
import { BackstagePlugin } from '../plugin';
@@ -85,26 +85,26 @@ export class PrivateAppImpl implements BackstageApp {
for (const output of plugin.output()) {
switch (output.type) {
case 'legacy-route': {
- const { path, component, options = {} } = output;
+ const { path, component: Component, options = {} } = output;
const { exact = true } = options;
routes.push(
}
exact={exact}
/>,
);
break;
}
case 'route': {
- const { target, component, options = {} } = output;
+ const { target, component: Component, options = {} } = output;
const { exact = true } = options;
routes.push(
}
exact={exact}
/>,
);
@@ -114,7 +114,7 @@ export class PrivateAppImpl implements BackstageApp {
const { path, target, options = {} } = output;
const { exact = true } = options;
routes.push(
- ,
+ ,
);
break;
}
@@ -122,7 +122,7 @@ export class PrivateAppImpl implements BackstageApp {
const { from, to, options = {} } = output;
const { exact = true } = options;
routes.push(
-
+
{routes}
-
-
+ } />
+
);
return () => rendered;
diff --git a/packages/core/package.json b/packages/core/package.json
index 818634238b..6c54b2c59e 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -34,7 +34,6 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
"@types/react": "^16.9",
- "@types/react-router-dom": "^5.1.5",
"@types/react-sparklines": "^1.7.0",
"classnames": "^2.2.6",
"clsx": "^1.1.0",
@@ -45,8 +44,8 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "6.0.0",
- "react-router": "^5.2.0",
- "react-router-dom": "^5.2.0",
+ "react-router": "6.0.0-alpha.5",
+ "react-router-dom": "6.0.0-alpha.5",
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^12.2.1",
"react-use": "^14.2.0"
diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx
index b94c7409fc..fa2315307f 100644
--- a/packages/core/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core/src/layout/ErrorPage/ErrorPage.tsx
@@ -19,7 +19,7 @@ import { Typography, Link, Grid } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { BackstageTheme } from '@backstage/theme';
import { MicDrop } from './MicDrop';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
interface IErrorPageProps {
status: string;
@@ -40,7 +40,7 @@ const useStyles = makeStyles(theme => ({
export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => {
const classes = useStyles();
- const history = useHistory();
+ const history = useNavigate();
return (
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
index ab595ea9a7..b2c5e1fa59 100644
--- a/packages/dev-utils/package.json
+++ b/packages/dev-utils/package.json
@@ -41,8 +41,8 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.12.21",
- "react-router": "^5.2.0",
- "react-router-dom": "^5.2.0"
+ "react-router": "^6.0.0-alpha.5",
+ "react-router-dom": "^6.0.0-alpha.5"
},
"devDependencies": {
"@types/jest": "^25.2.2",
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index 136b6d6854..8f23e6b05e 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -39,8 +39,8 @@
"@types/react": "^16.9",
"react": "^16.12.0",
"react-dom": "^16.12.0",
- "react-router": "^5.2.0",
- "react-router-dom": "^5.2.0"
+ "react-router": "^6.0.0-alpha.5",
+ "react-router-dom": "^6.0.0-alpha.5"
},
"devDependencies": {
"@types/jest": "^25.2.2",
diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json
index 5445fffb32..44b9c63435 100644
--- a/plugins/catalog/package.json
+++ b/plugins/catalog/package.json
@@ -27,8 +27,8 @@
"@material-ui/lab": "4.0.0-alpha.45",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "react-router": "^5.2.0",
- "react-router-dom": "^5.2.0",
+ "react-router": "^6.0.0-alpha.5",
+ "react-router-dom": "^6.0.0-alpha.5",
"react-use": "^14.2.0"
},
"devDependencies": {
diff --git a/plugins/circleci/package.json b/plugins/circleci/package.json
index bbcac8e9eb..3158acadfb 100644
--- a/plugins/circleci/package.json
+++ b/plugins/circleci/package.json
@@ -37,8 +37,8 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazylog": "^4.5.2",
- "react-router": "^5.1.2",
- "react-router-dom": "^5.1.2",
+ "react-router": "^6.0.0-alpha.5",
+ "react-router-dom": "^6.0.0-alpha.5",
"react-use": "^14.2.0"
},
"devDependencies": {
diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx
index 1649c01b70..5907146340 100644
--- a/plugins/circleci/src/components/App.tsx
+++ b/plugins/circleci/src/components/App.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React from 'react';
-import { Switch, Route, MemoryRouter } from 'react-router';
+import { Route, MemoryRouter, Routes } from 'react-router';
import { BuildsPage, Builds } from '../pages/BuildsPage';
import { DetailedViewPage, BuildWithSteps } from '../pages/BuildWithStepsPage';
import { AppStateProvider } from '../state';
@@ -24,14 +24,13 @@ export const App = () => {
return (
<>
-
-
+
+ } />
}
/>
-
+
>
@@ -45,14 +44,10 @@ export const CircleCIWidget = () => (
<>
-
-
-
-
+
+ } />
+ } />
+
>
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index a3fee6e217..3062971dec 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -53,7 +53,7 @@
"@types/node": "^12.0.0",
"@types/testing-library__jest-dom": "^5.0.4",
"jest-fetch-mock": "^3.0.3",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "6.0.0-alpha.5"
},
"files": [
"dist/**/*.{js,d.ts}"
diff --git a/plugins/home-page/package.json b/plugins/home-page/package.json
index fa1236861c..cfe196a9d3 100644
--- a/plugins/home-page/package.json
+++ b/plugins/home-page/package.json
@@ -36,7 +36,7 @@
"@types/node": "^12.0.0",
"@types/testing-library__jest-dom": "^5.0.4",
"jest-fetch-mock": "^3.0.3",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "6.0.0-alpha.5"
},
"files": [
"dist/**/*.{js,d.ts}"
diff --git a/plugins/lighthouse/package.json b/plugins/lighthouse/package.json
index d8e2b53ace..aba8d964be 100644
--- a/plugins/lighthouse/package.json
+++ b/plugins/lighthouse/package.json
@@ -25,7 +25,7 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-markdown": "^4.3.1",
- "react-router-dom": "^5.2.0",
+ "react-router-dom": "6.0.0-alpha.5",
"react-use": "^14.2.0"
},
"devDependencies": {
diff --git a/plugins/lighthouse/src/components/AuditList/index.test.tsx b/plugins/lighthouse/src/components/AuditList/index.test.tsx
index bcd486e876..612bed4635 100644
--- a/plugins/lighthouse/src/components/AuditList/index.test.tsx
+++ b/plugins/lighthouse/src/components/AuditList/index.test.tsx
@@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => {
};
return {
...actual,
- useHistory: jest.fn(() => mocks),
+ useNavigate: jest.fn(() => mocks),
};
});
@@ -41,7 +41,7 @@ import AuditList from '.';
import * as data from '../../__fixtures__/website-list-response.json';
-const { useHistory } = jest.requireMock('react-router-dom');
+const { useNavigate } = jest.requireMock('react-router-dom');
const websiteListResponse = data as WebsiteListResponse;
describe('AuditList', () => {
@@ -145,7 +145,9 @@ describe('AuditList', () => {
);
const element = await rendered.findByLabelText(/Go to page 1/);
fireEvent.click(element);
- expect(useHistory().replace).toHaveBeenCalledWith(`/lighthouse?page=1`);
+ expect(useNavigate().replace).toHaveBeenCalledWith(
+ `/lighthouse?page=1`,
+ );
});
});
});
diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx
index 4dbbb05295..28fbc06ce1 100644
--- a/plugins/lighthouse/src/components/AuditList/index.tsx
+++ b/plugins/lighthouse/src/components/AuditList/index.tsx
@@ -16,7 +16,7 @@
import React, { useState, useMemo, FC, ReactNode } from 'react';
import { useLocalStorage, useAsync } from 'react-use';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { Grid, Button } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import Pagination from '@material-ui/lab/Pagination';
@@ -65,7 +65,7 @@ const AuditList: FC<{}> = () => {
return 0;
}, [value?.total, value?.limit]);
- const history = useHistory();
+ const history = useNavigate();
let content: ReactNode = null;
if (value) {
diff --git a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx
index 08e8005530..39c109788f 100644
--- a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx
+++ b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx
@@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => {
};
return {
...actual,
- useHistory: jest.fn(() => mocks),
+ useNavigate: jest.fn(() => mocks),
};
});
@@ -41,7 +41,7 @@ import { lighthouseApiRef, LighthouseRestApi, Audit } from '../../api';
import CreateAudit from '.';
import * as data from '../../__fixtures__/create-audit-response.json';
-const { useHistory }: { useHistory: jest.Mock } = jest.requireMock(
+const { useNavigate }: { useNavigate: jest.Mock } = jest.requireMock(
'react-router-dom',
);
const createAuditResponse = data as Audit;
@@ -115,7 +115,7 @@ describe('CreateAudit', () => {
describe('when the audit is successfully created', () => {
it('triggers a location change to the table', async () => {
- useHistory().push.mockClear();
+ useNavigate().push.mockClear();
mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse));
const rendered = render(
@@ -140,7 +140,7 @@ describe('CreateAudit', () => {
await wait(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled());
- expect(useHistory().push).toHaveBeenCalledWith('/lighthouse');
+ expect(useNavigate().push).toHaveBeenCalledWith('/lighthouse');
});
});
diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx
index 55ae99d1db..4c7570221c 100644
--- a/plugins/lighthouse/src/components/CreateAudit/index.tsx
+++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { useState, useCallback, FC } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import {
makeStyles,
Grid,
@@ -40,7 +40,7 @@ import { lighthouseApiRef } from '../../api';
import { useQuery } from '../../utils';
import LighthouseSupportButton from '../SupportButton';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
input: {
minWidth: 300,
},
@@ -58,7 +58,7 @@ const CreateAudit: FC<{}> = () => {
const lighthouseApi = useApi(lighthouseApiRef);
const classes = useStyles();
const query = useQuery();
- const history = useHistory();
+ const history = useNavigate();
const [submitting, setSubmitting] = useState(false);
const [url, setUrl] = useState(query.get('url') || '');
const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile');
@@ -113,7 +113,7 @@ const CreateAudit: FC<{}> = () => {