如何手动触发NextJS-TopLoader组件的加载动画？

我之前也碰到过一模一样的问题——用<Link>组件跳转时加载条正常触发，但用router.push()这种编程式路由跳转就没反应，查了半天文档才搞明白原因：NextJS-TopLoader默认只监听了<Link>的声明式跳转事件，编程式跳转不会自动触发加载逻辑，得咱们手动调用它的控制方法才行。

结合你的代码，给你两种实用的解决方案：

方案一：在跳转场景手动调用加载条API #

NextJS-TopLoader是基于nprogress封装的，它暴露了start()（启动加载）和complete()（结束加载）这两个核心方法，直接在你的登录成功逻辑里调用就行：

try {
    // ... 省略API调用、登录成功判断的代码
    toast.success('Login successful!');
    
    // 手动启动顶部加载条
    NextTopLoader.start();
    // 执行路由跳转，等跳转完成后结束加载条
    await router.push('/dashboard');
    NextTopLoader.complete();
} catch (error) {
    // ... 错误处理代码
}

这样就能和<Link>跳转的加载条效果完全一致，精准控制加载的启动和结束时机。

方案二：全局监听路由事件（一劳永逸） #

如果希望所有编程式跳转都自动触发加载条，不用每次都手动写代码，可以在_app.tsx里监听Next.js Router的全局事件，不管是<Link>还是router.push()都能自动触发加载条：

import { useRouter } from 'next/router';
import NextTopLoader from 'nextjs-toploader';
import { useEffect } from 'react';

export default function App({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 路由开始跳转时启动加载条
    const startLoader = () => NextTopLoader.start();
    // 路由跳转完成/失败时结束加载条
    const stopLoader = () => NextTopLoader.complete();

    // 绑定路由事件监听
    router.events.on('routeChangeStart', startLoader);
    router.events.on('routeChangeComplete', stopLoader);
    router.events.on('routeChangeError', stopLoader);

    // 组件卸载时移除监听
    return () => {
      router.events.off('routeChangeStart', startLoader);
      router.events.off('routeChangeComplete', stopLoader);
      router.events.off('routeChangeError', stopLoader);
    };
  }, [router]);

  return (
    <>
      <NextTopLoader />
      <Component {...pageProps} />
    </>
  );
}

另外提一句，你之前试的NextTopLoader.caller()是个无效方法，NextJS-TopLoader的有效手动控制方法就是start()、complete()这些和nprogress对齐的API~

备注：内容来源于stack exchange，提问作者Primeboss