如何使用 Next.js 访问当前在导航中加载的 url 或页面

Question

我想在页面导航中添加每页自定义骨架加载器。为此，我需要知道当前正在加载哪个页面。

我已经用 useRouter 尝试过这种方法：

//_app.tsx
useEffect(() => {
    const handleStart = () => setLoading(true);
    const handleComplete = () => setLoading(false);
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    console.log(router);
  }, [router]);

开始导航时会触发 routechange 事件，但路由控制台日志不会打印我要去的页面，直到它已经加载。我注意到浏览器中的 url 在页面加载完成之前没有改变。

我需要一种获取当前加载页面的方法（路径名或任何可以告诉我当前正在加载的内容）。这可能吗？

我正在使用 Next.js、TypeScript 和 SSR。

Answer 1

您可以在 routeChangeStart 处理程序函数中访问路径，因为它在第一个参数中触发时接收到您要导航到的路线的 URL。

useEffect(() => {
    const handleStart = (url: string) => {
        console.log(url); // Will log the path to the page being navigated to
        setLoading(true);
    };
    const handleComplete = () => setLoading(false);
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);
    
    // Cleanup event listeners
    return () => {
        router.events.off('routeChangeStart', handleStart);
        router.events.off('routeChangeComplete', handleComplete);
        router.events.off('routeChangeError', handleComplete);
    }
}, [router]);

附带说明一下，最好在 useEffect 的清理阶段清理任何预先设置的事件侦听器。

如何使用 Next.js 访问当前在导航中加载的 url 或页面

How to access the url or page that is currently loading on navigation with Next.js

routes

reactjs

server-side-rendering

next.js