Move handlePageLoad function to react hook

src/app/index.js

@@ -14,6 +14,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line import/no-unresolved
 import { store as noticesStore } from '@wordpress/notices';
 import { kebabCase, filter } from 'lodash';
+import { useHandlePageLoad } from './util/hooks';
 import { Root } from '@newfold/ui-component-library';
 import { AppNav } from './components/app-nav';
 import { SiteInfoBar } from './components/site-info';
@@ -50,6 +51,8 @@ const AppBody = ( props ) => {
 	const hashedPath = '#' + location.pathname;
 	const { booted, hasError } = useContext( AppStore );
 
+	useHandlePageLoad();
+
 	return (
 		<main
 			id="wppbh-app-rendered"

src/app/util/hooks/index.js

@@ -0,0 +1 @@
+export { default as useHandlePageLoad } from './useHandlePageLoad.js';

src/app/util/hooks/useHandlePageLoad.js

@@ -0,0 +1,18 @@
+import { useLocation } from 'react-router-dom';
+
+const useHandlePageLoad = () => {
+	const location = useLocation();
+	const routeContents = document.querySelector( '.wppbh-app-body-inner' );
+
+	useEffect( () => {
+		window.scrollTo( 0, 0 );
+		if ( routeContents ) {
+			routeContents.focus( { preventScroll: true } );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ location.pathname ] );
+
+	return true;
+};
+
+export default useHandlePageLoad;