Как открыть window.scrollTo с другой страницы в React?

Question

Я создаю статическую страницу с помощью gatsby.js.

Моя проблема:

У меня есть панель навигации с функцией прокрутки до определенного раздела домашней страницы с помощью ссылок ... Я хочу отобразить ту же панель навигации на других страницах, поэтому я создал компонент макета.

Однако, когда я нахожусь на другой странице, которая не является домашней страницей, ссылка на контакт не работает, так как у меня есть раздел контактов только на домашней странице. Чего я хочу достичь, так это когда я нажимаю на контактную ссылку на навигационной панели, а меня нет на домашней странице, функция перенаправляет на домашнюю страницу, а затем прокручивает в раздел контактов, все сразу.

Компонент заголовка:

const Header = ({ scroll, contactRef }) => {
   return (
    <header>
    <nav>
        <div>
           <ul>
             <li>
               <Link to="">Home</Link>
             </li>                                           
                 <li>
           <a onMouseDown={() => scroll(contactRef)}>
              Contact
           </a>
            </li> 
                <li>
               <Link to="/portfolio">Portfolio</Link>
            </li>
         </ul>
           <div />      
       </nav>
    </header>

Компонент макета:

const Layout = (props) => {
    const contactRef = useRef(null);
    const scrollToRef = (ref) => {
        ref.current &&
            window.scrollTo({
                top: ref.current.offsetTop,
                left: 0,
                right: 0,
                behavior: 'smooth'
            });
    };

    const childrenWithProps = React.Children.map(props.children, (child) =>
        React.cloneElement(child, { contactRef })
    );
    return (
        <div>
            <Header
                scroll={scrollToRef}
                contactRef={contactRef}
            />
            {childrenWithProps}
            <Footer />
        </div>
    );
};