Remix项目中React Context未按预期生效返回默认值问题

这个问题是Remix项目里使用React Context的典型坑，核心原因有两个：

• 你把Context定义在了root.tsx路由入口文件里，组件从~/root导入Context时，会触发路由模块的循环引用，导致useContext拿到的Context实例和Provider挂载的实例不是同一个引用，自然匹配不到传入的value，只能回退到createContext时设置的默认值"default"。
• 你当前的Context Provider只包裹了<Header />单个组件，没有覆盖整个应用树，加上Remix本身存在错误边界、hydration降级等独立渲染分支，很容易出现Context树断裂，组件找不到上层Provider的问题。

1. 抽离Context到独立文件，彻底避免循环引用
   新建app/contexts/my-context.tsx，把Context创建逻辑移到这个非路由文件里：

   import { createContext } from "react";
   export const MyContext = createContext("default");
   

2. 调整Provider位置，覆盖整个应用树
   修改root.tsx，把Provider放到body节点下，包裹所有渲染内容，包括Header、路由出口、Remix内置组件、Footer，确保所有组件都在Context的作用范围内：

   import { MyContext } from "~/contexts/my-context";
   // 其余Meta/Links/Outlet等导入保持不变
   
   function Document({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <Meta />
           <Links />
         </head>
         <body className="root-body">
           <MyContext.Provider value="bonjour!">
             <Header />
             {children}
             <ScrollRestoration />
             <Scripts />
             <LiveReload />
             <Footer />
           </MyContext.Provider>
         </body>
       </html>
     );
   }
   
   export default function App() {
     return (
       <Document>
         <Outlet />
       </Document>
     );
   }
   

3. 修正Header组件的Context导入路径，从独立的context文件引入：

   import { useContext } from "react";
   import { MyContext } from "~/contexts/my-context";
   
   export const Header = () => {
     const result = useContext(MyContext);
     console.log(result); // 此处会正确打印 "bonjour!"
     return null
   }
   

补充说明：如果你在root.tsx里自定义了ErrorBoundary、HydrateFallback这类特殊渲染出口，也要保证这些出口返回的组件树同样被MyContext.Provider包裹，否则这些分支下渲染的Header还是会拿到默认值。

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