Javascript 在盖茨比中添加预加载程序

我有一个组件

preload

，它负责预加载，这意味着这个组件将弹出2秒钟，并为页面打开一个窗口

我希望每次更改路线时都会弹出此窗口，例如我访问

/blog

页面，因此在加载页面之前，它必须首先呈现此窗口或加载此窗口

我所做的是，我去了

gatsby browser.js

，然后调用以下命令：

  export const onPreRouteUpdate = () => {
    return <Preloader />
  }
  

---

如何在每次路由更改时加载此文件？

您只需将

添加到布局中，然后使用

onPreRouteUpdate

将其隐藏

gatsby browser.js

export const onPreRouteUpdate = () => {
    setTimeout(() => {
        document.getElementById("loader-wrapper").style.display = "none"
    }, 1000)
}

   /* preloader */
    setTimeout(function(){
        $('body').addClass('loaded');
        $('h1').css('color','#222222');
    }, 1000);

export const onPreRouteUpdate = () => {
    setTimeout(() => {
        document.getElementById("loader-wrapper").style.display = "none"
    }, 1000)
}