NextJS 14中用户导航时React Providers被卸载问题求助

在Next.js 14的App Router中，page.tsx作为路由的叶子节点组件，当你在/client/[id]/onboarding下的子路由（如/onboarding/company-information）间跳转时，原/client/[id]/onboarding/page.tsx组件会被完全卸载，导致其中包裹的状态Providers也随之卸载。这不是重新渲染问题，而是组件生命周期的卸载-重建流程，必然引发状态丢失和UI闪烁。

App Router中的layout.tsx是对应路由段的持久化容器，子路由跳转时布局组件不会被卸载。只需将状态Providers从page.tsx迁移到/client/[id]/onboarding/layout.tsx中，即可保持Providers的挂载状态，避免状态重置。

具体实现步骤 #

1. 创建/修改路由布局文件
   在/client/[id]/onboarding目录下创建layout.tsx，将Providers包裹在布局内，传递子路由页面内容：

'use client';
import { MyStateProvider } from '@/providers/MyStateProvider';

export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
  return (
    <MyStateProvider>
      {children}
    </MyStateProvider>
  );
}

注意：如果Providers依赖客户端API（如useState、useEffect），需添加'use client'指令标记为客户端组件。

2. 调整原页面组件为子路由默认页
   将原/client/[id]/onboarding/page.tsx的内容改为默认子页面（如首页），或迁移到新的子路由目录（如/client/[id]/onboarding/overview/page.tsx）：

// app/client/[id]/onboarding/page.tsx
import Link from 'next/link';

export default function OnboardingOverview() {
  return (
    <div>
      <h1>Onboarding Overview</h1>
      <Link href="/client/123/onboarding/company-information">Company Information</Link>
      <Link href="/client/123/onboarding/financials">Financials</Link>
    </div>
  );
}

3. 保持子路由页面结构不变
   原有的子路由页面（如company-information/page.tsx、financials/page.tsx）无需修改，它们会自动作为布局的children渲染：

// app/client/[id]/onboarding/financials/page.tsx
export default function FinancialsPage() {
  return <h2>Financial Information</h2>;
}

App Router中，每个路由段的layout.tsx会在该路由段下所有子路由跳转时保持挂载状态，其内部的状态Providers不会经历卸载-重建流程，因此状态会被持久化保留，避免重复获取数据和UI闪烁。

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