如何使用 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 数据