Upgrade router and navigation

3 files changed, 10 insertions, 10 deletions

diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 98226269..3fef1203 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import RemoveDialog from '../../common/components/RemoveDialog';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
 const CollectionActions = ({
   itemId, editPath, endpoint, setTimestamp,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
 
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
   const [removing, setRemoving] = useState(false);
 
   const handleEdit = () => {
-    history.push(`${editPath}/${itemId}`);
+    navigate(`${editPath}/${itemId}`);
     setMenuAnchorEl(null);
   };
 
diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js
index f52bed38..36435cd9 100644
--- a/modern/src/settings/components/CollectionFab.js
+++ b/modern/src/settings/components/CollectionFab.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Fab, makeStyles } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useReadonly } from '../../common/util/permissions';
 import dimensions from '../../common/theme/dimensions';
 
@@ -18,13 +18,13 @@ const useStyles = makeStyles((theme) => ({
 
 const CollectionFab = ({ editPath, disabled }) => {
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const readonly = useReadonly();
 
   if (!readonly && !disabled) {
     return (
-      <Fab size="medium" color="primary" className={classes.fab} onClick={() => history.push(editPath)}>
+      <Fab size="medium" color="primary" className={classes.fab} onClick={() => navigate(editPath)}>
         <AddIcon />
       </Fab>
     );
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 28598e77..d0a3dde5 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Button from '@material-ui/core/Button';
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
 const EditItemView = ({
   children, endpoint, item, setItem, defaultItem, validate, onItemSaved, menu, breadcrumbs,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const classes = useStyles();
   const t = useTranslation();
 
@@ -60,7 +60,7 @@ const EditItemView = ({
       if (onItemSaved) {
         onItemSaved(await response.json());
       }
-      history.goBack();
+      navigate(-1);
     } else {
       throw Error(await response.text());
     }
@@ -76,7 +76,7 @@ const EditItemView = ({
               type="button"
               color="primary"
               variant="outlined"
-              onClick={() => history.goBack()}
+              onClick={() => navigate(-1)}
             >
               {t('sharedCancel')}
             </Button>