7 files changed, 29 insertions, 32 deletions
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 87cb08fb..4bf09606 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -1,4 +1,4 @@
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
 import Layout from './components/Header';
 import BugPage from './pages/bug';
@@ -10,13 +10,13 @@ import NotFoundPage from './pages/notfound/NotFoundPage';
 export default function App() {
   return (
     <Layout>
-      <Switch>
-        <Route path="/" exact component={ListPage} />
-        <Route path="/new" exact component={NewBugPage} />
-        <Route path="/bug/:id" exact component={BugPage} />
-        <Route path="/user/:id" exact component={IdentityPage} />
-        <Route component={NotFoundPage} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<ListPage />} />
+        <Route path="/new" element={<NewBugPage />} />
+        <Route path="/bug/:id" element={<BugPage />} />
+        <Route path="/user/:id" element={<IdentityPage />} />
+        <Route element={<NotFoundPage />} />
+      </Routes>
     </Layout>
   );
 }
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx
index fd0fb9d4..6b31197d 100644
--- a/webui/src/pages/bug/BugQuery.tsx
+++ b/webui/src/pages/bug/BugQuery.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -8,13 +8,12 @@ import NotFoundPage from '../notfound/NotFoundPage';
 import Bug from './Bug';
 import { useGetBugQuery } from './BugQuery.generated';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const BugQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error('missing route parameters');
 
-const BugQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetBugQuery({
-    variables: { id: match.params.id },
+    variables: { id: params.id },
   });
   if (loading) return <CircularProgress />;
   if (!data?.repository?.bug) return <NotFoundPage />;
diff --git a/webui/src/pages/identity/IdentityQuery.tsx b/webui/src/pages/identity/IdentityQuery.tsx
index 762c17cc..5a3b2616 100644
--- a/webui/src/pages/identity/IdentityQuery.tsx
+++ b/webui/src/pages/identity/IdentityQuery.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -7,13 +7,12 @@ import { useGetUserByIdQuery } from '../../components/Identity/UserIdentity.gene
 
 import Identity from './Identity';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const UserQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error();
 
-const UserQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetUserByIdQuery({
-    variables: { userId: match.params.id },
+    variables: { userId: params.id },
   });
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index e85ae488..fd2d5a3a 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import { LocationDescriptor } from 'history';
 import { useRef, useState, useEffect } from 'react';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Location, Link } from 'react-router-dom';
 
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -138,7 +137,7 @@ type FilterDropdownProps = {
   dropdown: DropdownTuple[];
   itemActive: (key: string) => boolean;
   icon?: React.ComponentType<SvgIconProps>;
-  to: (key: string) => LocationDescriptor;
+  to: (key: string) => Location;
   hasFilter?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -240,7 +239,7 @@ function FilterDropdown({
 
 export type FilterProps = {
   active: boolean;
-  to: LocationDescriptor; // the target on click
+  to: Location; // the target on click
   icon?: React.ComponentType<SvgIconProps>;
   children: React.ReactNode;
 };
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 9620bd97..1a3476e2 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -1,6 +1,6 @@
 import { pipe } from '@arrows/composition';
-import { LocationDescriptor } from 'history';
 import * as React from 'react';
+import { Location } from 'react-router-dom';
 
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
@@ -68,7 +68,7 @@ function quoteLabel(value: string) {
 
 type Props = {
   query: string;
-  queryLocation: (query: string) => LocationDescriptor;
+  queryLocation: (query: string) => Location;
 };
 
 function FilterToolbar({ query, queryLocation }: Props) {
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 8dd9668e..21818758 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -2,7 +2,7 @@ import { ApolloError } from '@apollo/client';
 import { pipe } from '@arrows/composition';
 import { useState, useEffect, useRef } from 'react';
 import * as React from 'react';
-import { useLocation, useHistory, Link } from 'react-router-dom';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
 
 import { Button, FormControl, Menu, MenuItem } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
@@ -185,7 +185,7 @@ const Error: React.FC<ErrorProps> = ({ error }: ErrorProps) => {
 
 function ListQuery() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = new URLSearchParams(location.search);
   const query = params.has('q') ? params.get('q') || '' : 'status:open';
 
@@ -290,7 +290,7 @@ function ListQuery() {
 
   const formSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    history.push(queryLocation(input));
+    navigate(queryLocation(input));
   };
 
   const {
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 902a94bc..3ab2a92a 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,5 +1,5 @@
 import { FormEvent, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
@@ -49,7 +49,7 @@ function NewBugPage() {
   const classes = useStyles();
 
   let issueTitleInput: any;
-  let history = useHistory();
+  let navigate = useNavigate();
 
   function submitNewIssue(e: FormEvent) {
     e.preventDefault();
@@ -63,7 +63,7 @@ function NewBugPage() {
       },
     }).then(function (data) {
       const id = data.data?.newBug.bug.id;
-      history.push('/bug/' + id);
+      navigate('/bug/' + id);
     });
     issueTitleInput.value = '';
   }