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

Posted 2023-02-22

【中文标题】如何使用 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 的清理阶段预先设置的任何事件侦听器是一种很好的做法。