修改进度条逻辑
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { usePathname, useSearchParams, useRouter } from 'next/navigation';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
import NProgress from 'nprogress';
|
import NProgress from 'nprogress';
|
||||||
|
|
||||||
// 创建全局钩子来拦截 router
|
// 创建全局钩子来拦截 router
|
||||||
@@ -9,9 +9,9 @@ let globalRouterRef: any = null;
|
|||||||
|
|
||||||
export default function TopProgressBar() {
|
export default function TopProgressBar() {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const isNavigatingRef = useRef(false);
|
const isNavigatingRef = useRef(false);
|
||||||
|
const previousPathnameRef = useRef(pathname);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 配置 NProgress
|
// 配置 NProgress
|
||||||
@@ -32,15 +32,23 @@ export default function TopProgressBar() {
|
|||||||
|
|
||||||
// 拦截 router.push
|
// 拦截 router.push
|
||||||
router.push = function (...args: Parameters<typeof originalPush>) {
|
router.push = function (...args: Parameters<typeof originalPush>) {
|
||||||
isNavigatingRef.current = true;
|
const targetUrl = args[0] as string;
|
||||||
NProgress.start();
|
const targetPathname = new URL(targetUrl, window.location.href).pathname;
|
||||||
|
if (targetPathname !== previousPathnameRef.current) {
|
||||||
|
isNavigatingRef.current = true;
|
||||||
|
NProgress.start();
|
||||||
|
}
|
||||||
return originalPush.apply(this, args);
|
return originalPush.apply(this, args);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 拦截 router.replace
|
// 拦截 router.replace
|
||||||
router.replace = function (...args: Parameters<typeof originalReplace>) {
|
router.replace = function (...args: Parameters<typeof originalReplace>) {
|
||||||
isNavigatingRef.current = true;
|
const targetUrl = args[0] as string;
|
||||||
NProgress.start();
|
const targetPathname = new URL(targetUrl, window.location.href).pathname;
|
||||||
|
if (targetPathname !== previousPathnameRef.current) {
|
||||||
|
isNavigatingRef.current = true;
|
||||||
|
NProgress.start();
|
||||||
|
}
|
||||||
return originalReplace.apply(this, args);
|
return originalReplace.apply(this, args);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -71,7 +79,8 @@ export default function TopProgressBar() {
|
|||||||
const currentOrigin = window.location.origin;
|
const currentOrigin = window.location.origin;
|
||||||
try {
|
try {
|
||||||
const targetOrigin = new URL(targetUrl, currentOrigin).origin;
|
const targetOrigin = new URL(targetUrl, currentOrigin).origin;
|
||||||
if (currentOrigin === targetOrigin) {
|
const targetPathname = new URL(targetUrl, currentOrigin).pathname;
|
||||||
|
if (currentOrigin === targetOrigin && targetPathname !== previousPathnameRef.current) {
|
||||||
isNavigatingRef.current = true;
|
isNavigatingRef.current = true;
|
||||||
NProgress.start();
|
NProgress.start();
|
||||||
}
|
}
|
||||||
@@ -106,12 +115,13 @@ export default function TopProgressBar() {
|
|||||||
}, [router]);
|
}, [router]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 页面路径变化时,表示页面已加载完成,结束进度条
|
// 仅在页面路径变化时结束进度条,参数变化不触发
|
||||||
if (isNavigatingRef.current) {
|
if (isNavigatingRef.current) {
|
||||||
NProgress.done();
|
NProgress.done();
|
||||||
isNavigatingRef.current = false;
|
isNavigatingRef.current = false;
|
||||||
}
|
}
|
||||||
}, [pathname, searchParams]);
|
previousPathnameRef.current = pathname;
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user