如何在Next.js路由中复用加载指示器？

你当前通过每个路由创建loading.js导入通用组件的方式可行，但有更高效的方案，无需重复创建文件：

1. 路由组共享加载组件 #

把需要共用加载效果的路由归类到同一个路由组（用括号包裹的文件夹，比如(common-routes)），然后在这个路由组的根目录创建一个loading.js，直接导出你的通用加载组件。这样组内所有路由都会自动使用这个加载组件，不用逐个路由创建文件。

示例目录结构：

app/
  (common-routes)/
    loading.js
    dashboard/
      page.js
    settings/
      page.js
    profile/
      page.js
  about/
    page.js  // 这个路由不在组内，可自定义加载组件或使用全局的

(common-routes)/loading.js代码：

import LoadingWithSpinner from '@/components/Loading';

// 直接导出通用组件，无需额外包裹函数
export default LoadingWithSpinner;

2. 全局默认加载组件 #

如果想让所有路由默认使用同一个加载组件，只需在app目录的根级别创建loading.js。任何没有自定义loading.js的路由都会自动继承这个全局加载组件；如果某个路由需要特殊加载效果，只需在该路由目录下单独创建loading.js即可覆盖全局设置。

示例目录结构：

app/
  loading.js  // 全局默认加载组件
  dashboard/
    page.js
  settings/
    page.js
  checkout/
    loading.js  // 这个路由会使用自定义的加载组件
    page.js

app/loading.js代码：

import LoadingWithSpinner from '@/components/Loading';

export default LoadingWithSpinner;

3. 可选：根据路由动态调整加载内容 #

如果需要给不同路由的加载提示做细微区分，可以在通用LoadingWithSpinner组件中结合usePathname获取当前路由，动态调整显示内容：

'use client';
import { usePathname } from 'next/navigation';

export default function LoadingWithSpinner() {
  const currentRoute = usePathname();
  
  return (
    <div>
      {/* 你的SVG加载动画 */}
      <span className="sr-only">
        {currentRoute.includes('dashboard') ? '加载仪表盘数据...' : '加载中，请稍候...'}
      </span>
    </div>
  );
}

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