ReactJS // 预加载器仅在页面刷新后消失

Question

我正在尝试做一个加载器动画，用户点击主页链接。 当我单击主页时，它会打开并运行预加载器，但预加载器永远不会消失 - 只有在页面刷新之后。

JS:

$(document).ready(function () {

        /*preloader*/
        $(window).on('load', function () {
            $('.preloader').fadeOut('slow', function () {
                $(this).remove();
            });
        });
}

HTML：

<div className="preloader">
    <div className="ball ball-1">
    </div>
    <div className="ball ball-2" />
    <div className="ball ball-3" />
 </div>

我尝试了以下方法来检查 url 是否已更改并隐藏预加载器，但随后 css 被破坏：

useEffect(() => {`your text`
      // execute on location change
       setCount(count + 1);
       console.log('Location changed!', location.pathname);
     const asd = document.querySelector(".preloader");
       if(asd){
       asd.style.display = "none";`your text`
       }
}, [location]);