FocusOnRouteChange for React Router -- code adapted from https://github.com/ReactTraining/react-router/issues/5210 . Support Focus Accessibility on route navigation changes

FocusOnRouteChange.tsx

import React, { useRef, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

let prevPathName: string | null = null;

export const FocusOnRouteChange: React.FC = ({ children }) => {
    const history = useHistory();

    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        history.listen(({ pathname }) => {
            // don't refocus if only the query params/hash have changed
            if (pathname !== prevPathName) {
                ref.current?.focus();

                // prevent jank if focusing causes page to scroll
                window.scrollTo(0, 0);

                prevPathName = pathname;
            }
        });
    });

    return (
        <div ref={ref} tabIndex={-1} style={{ outline: 'none' }}>
            {children}
        </div>
    );
};