Merge pull request #155 from episerver/bugfix/AFORM-4388-Error-going-…

…to-next-step

Add compatible for UseHistory of react-router v5

.gitignore

@@ -14,3 +14,6 @@ coverage/
 /samples/epiCloud/
 /samples/musicfestival-frontend-react/build/
 /samples/musicfestival-backend-dotnet/App_Data/
+
+.env.local
+appsettings.development.json

samples/musicfestival-frontend-react/src/hooks/useHistoryCompatible.tsx

@@ -0,0 +1,14 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+
+export const useHistoryCompatible = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return {
+    push: (path: any, state: any) => navigate(path, { state }),
+    replace: (path: any, state: any) => navigate(path, { replace: true, state }),
+    location: location,
+    goBack: () => navigate(-1),
+    goForward: () => navigate(1),
+  };
+};

samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx

@@ -1,11 +1,8 @@
 import { Form, FormContainerBlock, FormLogin } from '@episerver/forms-react';
 import { FormCache, FormConstants, IdentityInfo, extractParams } from '@episerver/forms-sdk';
 import { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useFetch } from '../useFetch';
+import { useHistoryCompatible } from '../hooks/useHistoryCompatible';
 import SearchButton from '../components/SearchButton';
-import { getImageUrl } from '../helpers/urlHelper';
-import authService from '../authService';
 
 type BuyTicketPageProps = {
     content: any,
@@ -24,7 +21,7 @@ function BuyTicketPage({ content }: BuyTicketPageProps) {
         } as IdentityInfo)
     }, [formCache.get<string>(FormConstants.FormAccessToken)]);
 
-    const history = useNavigate()
+    const history = useHistoryCompatible()
     return (
         <>
             {content &&