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

Posted

技术标签:

【中文标题】如何使用 Next.js 访问当前在导航中加载的 url 或页面【英文标题】:How to access the url or page that is currently loading on navigation with Next.js 【发布时间】:2021-09-24 02:38:43 【问题描述】:

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

我已经用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 和 s-s-r。

【问题讨论】:

【参考方案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 或页面的主要内容,如果未能解决你的问题,请参考以下文章

数据存储如何获取页面中加载的当前数据

HTML/Javascript:如何访问在带有 src 集的脚本标签中加载的 JSON 数据

如何获取 HTML5 视频中加载的当前片段百分比?

我在应用程序委托中加载的视图控制器(在导航控制器中)与标签栏重叠

如何使用 Next.js 在测试中加载环境变量?

如何在 Next.js 中加载外部图像?