如何阻止特定页面状态变更时显示主loading.tsx？

问题场景 #

在项目的app/auth/email/page路径下，页面状态变更时根目录的loading.tsx会短暂显示，即使在该page目录下创建空白loading.tsx仍有闪烁，需要完全禁用该路径下的Loading显示。

项目结构：

app
├── loading.tsx
├── auth
│   └── email
│       └── page.tsx

可行解决方案 #

方案1：在路由段层级创建返回null的loading.tsx #

Next.js的loading.tsx是路由段级别的，将自定义的loading.tsx放在auth/email目录下（而非page子目录），直接返回null，就能覆盖根目录的loading组件，彻底避免加载时的闪烁：

// app/auth/email/loading.tsx
export default function Loading() {
  return null;
}

方案2：用Suspense包裹页面内容并设置空fallback #

在page.tsx中，用React.Suspense包裹所有页面内容，将fallback设为null，这样组件加载或状态变更时不会触发路由级的loading：

// app/auth/email/page.tsx
import { Suspense } from 'react';

export default function EmailPage() {
  return (
    <Suspense fallback={null}>
      {/* 页面所有内容 */}
    </Suspense>
  );
}

方案3：客户端组件中手动跳过加载状态渲染 #

如果该页面是客户端组件，可以通过useRouter获取路由加载状态，直接渲染页面内容，跳过loading显示：

// app/auth/email/page.tsx
'use client';

import { useRouter } from 'next/navigation';

export default function EmailPage() {
  const router = useRouter();

  // 路由加载时直接渲染页面内容，不显示任何loading
  return <>{/* 页面内容 */}</>;
}

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