如何从React中的另一个页面window.scrollTo？

Question

我正在使用gatsby.js构建静态页面。

我的问题是：

我有一个导航栏，该导航栏具有使用refs滚动到主页的特定部分的功能...我想将同一导航栏渲染到其他页面，这就是为什么我创建了布局组件的原因。

但是，当我进入另一个不是主页的页面时，“联系”链接不起作用，因为我仅在主页上有一个“联系”部分。我想要实现的是，当我单击导航上的联系人链接而我不在主页中时，该函数将重定向到主页，然后一次滚动到联系人部分。

标题组件：

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>
    );
};