反应路由器链接加载事件

如何解决反应路由器链接加载事件

我有一个包含导航链接的导航栏：

    <NavLink to='calculator'>
        <i className="fas fa-calculator"></i>
    </NavLink>
    <NavLink to='price'>
        <i className="fas fa-dollar-sign"></i>
    </NavLink>
    <NavLink onLoad = {() => console.log('gallery loaded')} onClick = {() => console.log('gallery clicked')} to='gallery'>
        <i className="far fa-images"></i>
    </NavLink>
    <NavLink to='contacts'>
        <i className="far fa-address-card"></i>
    </NavLink>

当我点击一个画廊链接时，它需要一些时间来加载，我不清楚它是如何工作的，因为根据我点击链接后画廊组件的内容，它可以立即重定向到 /gallery 然后我可以看到我的图像正在加载，或者它冻结直到图像加载然后才重定向到 /gallery。现在我处理第二种情况。 我需要的是向此链接添加一个 eventListener，该链接将在加载所有内容且实际页面为 /gallery 时触发。我在画廊组件中有一些逻辑，告诉我所有图像都已加载。但是现在我想抓住这个时间延迟，直到页面被重定向到 /gallery 并添加一个微调器或类似的东西，我不喜欢我的网站被冻结甚至 1-2 秒。顺便说一句，onClick 事件有效，当我单击它时，我会在控制台中看到该消息，但 onLoad 却没有。有谁知道我该如何解决它？