Next.js 13中如何在路由导航间创建加载组件

为啥之前用next/router不行？因为Next.js 13的App Router彻底换了路由API，客户端组件得用next/navigation里的工具，旧的next/router已经不兼容了。下面给你两种靠谱的实现方式：

方式一：全局监听路由变化（适合全局加载提示） #

先写个客户端组件，用useRouter监听路由的开始、完成/错误事件，控制加载组件的显示：

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import LoadingSpinner from './LoadingSpinner'; // 替换成你自己的加载组件

export default function NavLoader() {
  const [isNavigating, setIsNavigating] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // 路由开始跳转时显示加载
    const startNav = () => setIsNavigating(true);
    // 跳转完成或出错时隐藏加载
    const endNav = () => setIsNavigating(false);

    router.events.on('routeChangeStart', startNav);
    router.events.on('routeChangeComplete', endNav);
    router.events.on('routeChangeError', endNav);

    // 组件卸载时移除监听
    return () => {
      router.events.off('routeChangeStart', startNav);
      router.events.off('routeChangeComplete', endNav);
      router.events.off('routeChangeError', endNav);
    };
  }, [router]);

  return isNavigating ? <LoadingSpinner /> : null;
}

然后把这个组件放到根布局app/layout.js里，这样所有路由跳转都会触发加载提示：

import NavLoader from './components/NavLoader';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <NavLoader />
        {children}
      </body>
    </html>
  );
}

方式二：页面级内置加载（适合单页面加载） #

如果只是某个页面需要加载提示，Next.js 13 App Router自带了更简单的方案——在对应页面的文件夹下创建loading.js文件。

比如你要给/posts页面加加载，就在app/posts文件夹里新建loading.js：

export default function PostsLoading() {
  return <div>正在加载帖子...</div>;
}

当用户导航到/posts时，会自动显示这个加载组件，直到页面的数据获取完成，完全不用手动监听路由，省心得很。

注意点 #

• 用useRouter的组件必须是客户端组件，记得开头加'use client';指令。
• 全局监听适合全站统一的加载提示，页面级loading.js适合单独页面的个性化加载状态。

内容的提问来源于stack exchange，提问作者devpedrodias