Added route tracking using goBackRoute state in App.jsx

src/App.jsx

@@ -7,6 +7,7 @@ export default function App() {
 
   // State for user history,
   const [userHistory, setUserHistory] = useState([]);
+  const [goBackRoute, setGoBackRoute] = useState('/Find-GitHub-User/');
 
   // Getting history from local storage.
   useEffect(() => {
@@ -21,7 +22,7 @@ export default function App() {
 
   return (
     <div className='bg-black text-white min-h-screen overflow-x-hidden flex flex-col justify-center items-center'>
-      <HistoryContextProvider value={{ userHistory, setUserHistory }}>
+      <HistoryContextProvider value={{ goBackRoute, setGoBackRoute, userHistory, setUserHistory }}>
         <Header />
         <Outlet />
       </HistoryContextProvider>

src/components/DisplayUserInfo.jsx

@@ -68,7 +68,7 @@ export default function DisplayUserInfo() {
 
     return (
         <>
-        <GoBackButton backURL={'/Find-GitHub-User/'} />
+        <GoBackButton />
         {returnValue}
         </>
     );

src/components/GoBackButton.jsx

@@ -1,32 +1,23 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
 import arrowLeft from '../images/arrow-left-light.svg';
+import { HistoryContext } from '../historyContext/HistoryContext.jsx';
 
-GoBackButton.propTypes = {
-    backURL: PropTypes.string.isRequired
-};
+export default function GoBackButton() {
 
-export default function GoBackButton( {backURL} ) {
-
-    // Getting navigate function from useNavigateHook.
-    const navigate = useNavigate();
-
-    // THis function navigates to the back URL when button is clicked.
-    const handleBackBtnClick = () => {
-        navigate(backURL);
-    };
+    // Getting route for going back when link is clicked.
+    const { goBackRoute } = useContext(HistoryContext);
 
     return (
         <div className='
             max-w-4xl w-[95%] p-4
             bg-slate-800
             rounded-t-2xl'
         >
-            <button
-                type='button'
-                onClick={handleBackBtnClick}
+            <Link
+                to={goBackRoute}
                 className='
+                    block w-fit
                     bg-sky-800
                     py-1 px-4
                     rounded-lg
@@ -35,7 +26,7 @@ export default function GoBackButton( {backURL} ) {
                     focus:outline-sky-400 focus:outline-4 focus:outline'
             >
                 <img src={arrowLeft} alt='Go back' width={30} />
-            </button>
+            </Link>
         </div>
     );
 };

src/components/History.jsx

@@ -1,12 +1,17 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { HistoryContext } from '../historyContext/HistoryContext.jsx';
 import GoBackButton from './GoBackButton.jsx';
 import { Link } from 'react-router-dom';
 
 export default function History() {
 
     // Getting history from context.
-    const { userHistory, setUserHistory } = useContext(HistoryContext);
+    const { userHistory, setUserHistory, setGoBackRoute } = useContext(HistoryContext);
+
+    // Set the go back route to home route on this component render.
+    useEffect(() => {
+        setGoBackRoute('/Find-GitHub-User/');
+    }, []);
 
     // This function returns the date in the format day-month-year.
     const formatDate = (milliseconds) => {
@@ -54,6 +59,7 @@ export default function History() {
                 >
                     <Link
                         to={`/Find-GitHub-User/username/${history['name']}`}
+                        onClick={() => {setGoBackRoute(`/Find-GitHub-User/history`)}}
                     >
                         <p className='w-full'><span className=''>{formatDate(history['id'])}</span><span className='pl-4 md:pl-7'>{history['name']}</span></p>
                     </Link>