coverPiccoverPic

Next 的 App Router 模式下,如何加入页面跳转时的进度条?

❓想要加一个进度条

问题起因是我想给自己博客页面切换时加一个进度条。博客前端技术栈是 React,使用 Next 做了 SSR。在进度条方面,npm 上有非常成熟的库 NProgress。我们只需要调用NProgress.start()NProgress.done()即可开启和结束进度条。我们监听到页面开始、结束切换的时候,调用NProgress.start()NProgress.done()即可。但是问题是,Next 13 版本以后推出的 App Router 模式并没有给出监听路由切换的 API。

🌐Pages Router 模式:router.events

先来看看 Pages Router 模式的做法:

可以发现,在 npm 上面有一个 Next 下封装 NProgress 的库:nextjs-progressbar,它是基于 Pages Router 开发的。

在 Pages Router 模式下,可以使用router.events的 API 去监听路由切换:

ts
  1. import { useEffect } from 'react'
  2. import { useRouter } from 'next/router'
  3. import NProgress from 'nprogress'
  4. import 'nprogress/nprogress.css'
  5. export function useProgressBar() {
  6. const router = useRouter()
  7. NProgress.configure({ showSpinner: false, speed: 400 })
  8. useEffect(() => {
  9. const startHandler = () => {
  10. NProgress.start()
  11. };
  12. const completeHandler = () => {
  13. NProgress.done()
  14. };
  15. router.events.on('routeChangeStart', startHandler)
  16. router.events.on('routeChangeComplete', completeHandler)
  17. }, [])
  18. }

是不是很方便呢,在 App Router 模式下就难搞了。

🛠App Router 模式:手动监听 + 代理

App Router 模式基于 React 的服务端组件对渲染的模式进行了更细致的划分,这看起来就很 Coooooooool,除了某些 API 不太方便之外。在 App Router 模式,没有监听路由跳转发起的 API,只能通过监听路径(usePathnameuseParams)、query 参数(useSearchParams)等方式知道路由已经发生变化了。

为了解决这个问题,这里参考了一下在 Next 的 issue:[Next 13] router.events removed?[next/navigation] Next 13: useRouter events? 下面的讨论。

监听路由开始切换,可以通过监听Link标签的click事件实现。具体操作是使用MutationObserver监听document,在子树变更时搜索所有<a>标签加上监听器。然后通过代理history.pushStatehistory.replaceState来在路由变更后关闭进度条。

借鉴 issue 中讨论的代码,这里自定义了 Hook 函数useProgressBar来实现这一点。

ts
  1. import { useEffect } from 'react'
  2. import NProgress from 'nprogress'
  3. import 'nprogress/nprogress.css'
  4. type PushStateInput = [any, string, string | URL | null | undefined]
  5. const handleAnchorClick = (event: MouseEvent) => {
  6. // 新开页面不处理
  7. if (event.ctrlKey || event.metaKey) {
  8. return
  9. }
  10. const target = (event.currentTarget as HTMLAnchorElement | null)?.target
  11. if (target && target !== '_self') {
  12. return
  13. }
  14. const targetUrl = (event.currentTarget as HTMLAnchorElement | null)?.href
  15. // 定位的 anchor 不处理
  16. if (!targetUrl || targetUrl.includes('#')) {
  17. return
  18. }
  19. const currentUrl = window.location.href
  20. if (targetUrl !== currentUrl) {
  21. NProgress.start()
  22. }
  23. }
  24. export const useProgressBar = () => {
  25. useEffect(() => {
  26. NProgress.configure({ showSpinner: false, speed: 400 })
  27. const handleMutation: MutationCallback = () => {
  28. const anchorElements: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('a[href]')
  29. anchorElements.forEach((anchor) => anchor.addEventListener('click', handleAnchorClick))
  30. }
  31. // 监听所有 dom 的改变
  32. const mutationObserver = new MutationObserver(handleMutation)
  33. mutationObserver.observe(document, { childList: true, subtree: true })
  34. window.history.pushState = new Proxy(window.history.pushState, {
  35. apply: (target, thisArg, argArray: PushStateInput) => {
  36. NProgress.done()
  37. return target.apply(thisArg, argArray)
  38. },
  39. })
  40. window.history.replaceState = new Proxy(window.history.replaceState, {
  41. apply: (target, thisArg, argArray: PushStateInput) => {
  42. NProgress.done()
  43. return target.apply(thisArg, argArray)
  44. },
  45. })
  46. }, [])
  47. }

useProgressBar处理全局的Link标签,如果是使用router.push切换路由,类似地,我们也在router.push触发一次进度条好了:

ts
  1. import NProgress from 'nprogress'
  2. import { useRouter } from 'next/navigation'
  3. import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime'
  4. type NextNavPushArgsType = [string, NavigateOptions | undefined]
  5. export const useProgressRouter = () => {
  6. const router = useRouter()
  7. router.push = new Proxy(router.push, {
  8. apply: (target, thisArg, argArray: NextNavPushArgsType) => {
  9. NProgress.start()
  10. return target.apply(thisArg, argArray)
  11. },
  12. })
  13. router.replace = new Proxy(router.replace, {
  14. apply: (target, thisArg, argArray: NextNavPushArgsType) => {
  15. NProgress.start()
  16. return target.apply(thisArg, argArray)
  17. },
  18. })
  19. return router
  20. }

到这里,进度条就施工完毕了。

📖结语

针对 App Router 模式下没有给出监听路由切换的特定 API 的情况,为了实现进度条的开始和结束,这里通过使用MutationObserver,监听所有Link标签的点击事件,来触发进度条;并且,包装history.pushState等 API,实现路由切换结束时关闭进度条。另外,对使用router.push等情况,我们通过增强router来使其拥有开启进度条的功能。

0 条评论未登录用户
Ctrl or + Enter 评论
🌸 Run