Next.js 13 App Router中Context Providers使用及路由上下文传递问题

问题根源 #

在App Router的单个page.js中定义的Context Provider，仅能作用于当前页面的组件层级。当通过router.push跳转到其他路由页面时，目标页面的组件属于独立的路由层级，无法继承当前page.js里Provider的上下文。

解决方案 #

1. 将Context Provider移至根layout.js

App Router中，根app/layout.js是所有路由的父容器，在这里统一包裹所有Context Provider，所有子路由页面都会自动继承上下文。

示例代码（根app/layout.js）：

import { SomeProvider } from '@/providers/SomeProvider';
// 导入你的其他Providers

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <SomeProvider>
          {/* 可嵌套多个Provider */}
          {/* <AnotherProvider> */}
            {children}
          {/* </AnotherProvider> */}
        </SomeProvider>
      </body>
    </html>
  );
}

2. 调整路由跳转逻辑的位置

把原来的条件跳转逻辑从嵌套的Content组件中移出，放到根page.js（应用入口页面）中，并标记为客户端组件（添加'use client'指令）：

示例代码（根app/page.js）：

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

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

  useEffect(() => {
    const conditional = /* 你的条件判断逻辑，比如从localStorage或API获取 */;
    if (conditional) {
      router.push('/some-route');
    } else {
      router.push('/some-other-route');
    }
  }, [router]);

  // 跳转过程中可显示加载状态
  return <div>加载中...</div>;
}

3. 旧Pages目录的正确配置（若需回退）

如果尝试旧Pages目录无效，大概率是_app.js中的Provider包裹逻辑错误。正确写法是在pages/_app.js中用Provider包裹所有页面组件：

import { SomeProvider } from '../providers/SomeProvider';

export default function MyApp({ Component, pageProps }) {
  return (
    <SomeProvider>
      <Component {...pageProps} />
    </SomeProvider>
  );
}

之后把条件跳转逻辑放在pages/index.js中，跳转后的页面会自动继承上下文。

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