Next.js Page Router页面无法访问Redux Store问题求助

你的问题根源很明确：App Router的layout.tsx只负责包裹app目录下的页面，pages目录里的Page Router页面不会被这个layout覆盖，所以这些页面找不到Redux的Provider上下文。

要解决这个问题，你需要给Page Router单独配置Provider，具体步骤如下：

1. 在pages目录下创建（如果还没有的话）_app.tsx文件，这是Page Router的全局入口组件，所有Page Router页面都会经过它。

2. 在_app.tsx中导入你已经写好的Redux Providers组件，并用它包裹页面组件：

// pages/_app.tsx
"use client";
import { Providers } from "../redux/provider";
import type { AppProps } from "next/app";

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

这样配置后，pages目录下的所有页面（包括你的test.jsx）都会被Redux Provider包裹，就能正常使用useSelector等Redux hook了。

额外说明：

• 你不需要修改现有的app/layout.tsx，它依然负责App Router页面的Provider包裹。
• 因为两个地方用的是同一个Providers组件和同一个store实例，所以App Router和Page Router的页面会共享Redux状态，数据是互通的。

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