您可以挂钩到 Next.js 路由器事件，但您不能设置转换需要多长时间。
例如如果您希望转换为 3 秒：
- 如果 Next.js 转换需要 1 秒，您可以等待 2 秒，但是
- 如果 Next.js 转换需要 4 秒，您将无能为力。
而且您无法确定 Next.js 转换需要多长时间。
自定义“路由”
无论如何，如果您依赖 Next.js 过渡从不花费比动画更多的时间，那么您将不得不以某种方式“存储”旧页面视图，并在动画运行时显示它而不是新页面。
从 Next.js 的角度来看，应该会显示新页面。我认为这不适用于 Next.js 路由，我猜你必须自己进行“路由”（根据 url 显示内容）。例如。将您的应用程序设计为始终同时具有两个页面，一个显示，一个隐藏并且可能正在加载。然后，您可以随时在这两个页面之间切换。
你可能想看看实验功能React "Suspense"（我不知道，我没用过）。
路由前等待
如果你想在过渡开始前等待一段时间，你可以这样做：
const startAnimation = () => {
return new Promise( ( resolve, reject ) => {
console.log('...animate...');
setTimeout( resolve, 3000 ); // <-- replace this line with your animation, and call resolve() when finished
} );
};
const routerWrapper = {
push: ( url ) => {
startAnimation().then( () => {
console.log('Next.js routing starts...');
Router.push( url );
})
}
};
// ...
routerWrapper.push( newUrl ); // <-- this instead of Router.push( newUrl )
路由完成时停止动画
如果你想在调用Route.push()时启动动画，并在Next.js过渡完成时停止动画，你可以使用Next.js routerevents，例如：
export default function App( props: AppProps ) {
const { Component, pageProps } = props;
const router = useRouter()
useEffect(() => {
const routeChangeStart = (url, { shallow }) => {
console.log('start animation');
};
const routeChangeComplete = (url, { shallow }) => {
console.log('stop animation');
};
router.events.on('routeChangeStart', routeChangeStart);
router.events.on('routeChangeComplete', routeChangeComplete);
return () => {
router.events.off('routeChangeStart', routeChangeStart);
router.events.off('routeChangeComplete', routeChangeComplete);
}
}, [])
// --
return (
<Component { ...pageProps } />
);
}