fix: Migrate useHistory to useNavigate (change in react-router v6)

Author: flonix8

src/appHeader/AppHeader.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material";
 import {styled} from "@mui/material/styles";
 import HeaderStyles from "./HeaderStyles";
-import {useHistory} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import {useTranslation} from "react-i18next";
 import {Logout} from "@mui/icons-material";
 import StarwitLogo from "../assets/img/logo-white.png";
@@ -16,7 +16,7 @@ function AppHeader(props) {
         styles = HeaderStyles;
     }
 
-    const history = useHistory();
+    const navigate = useNavigate();
     const {t} = useTranslation();
 
     const LogoImg = styled('img')(({theme}) => styles.menuLogoImg(theme));
@@ -34,10 +34,10 @@ function AppHeader(props) {
                     <Spacer/>
                     {menuItems.map(item => (
                         <Button key={item.title} color="inherit" disableRipple sx={styles.linkButton}
-                                onClick={() => history.push(item.link)}>{t(item.title)}</Button>
+                                onClick={() => navigate(item.link)}>{t(item.title)}</Button>
                     ))}
                     <IconButton color="inherit" disableRipple sx={styles.linkButton}
-                                onClick={() => history.push("/logout")}><Logout/></IconButton>
+                                onClick={() => navigate("/logout")}><Logout/></IconButton>
                 </Toolbar>
             </AppBar>
             <ContentSpacer/>

src/form/EntityDetail.jsx

@@ -15,7 +15,7 @@ import {
 } from "@mui/material";
 import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
-import {useHistory} from "react-router";
+import {useNavigate} from "react-router";
 import EntityDetailStyles from "./EntityDetailStyles";
 import {
     handleChange,
@@ -43,7 +43,7 @@ import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
 function EntityDetail(props) {
     const {entity, setEntity, fields, setFields, prefix, entityRest, id} = props;
     const {t} = useTranslation();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const [titleKey, setTitleKey] = useState(null);
     const [hasFormError, setHasFormError] = React.useState(false);
@@ -80,7 +80,7 @@ function EntityDetail(props) {
     }
 
     const goBack = () => {
-        history.push("/" + prefix);
+        navigate("/" + prefix);
     };
 
     return (