React useContext始终返回默认值问题求助（附代码示例）

核心问题 #

你的代码里直接调用组件函数作为Route的element值，导致组件实例脱离了AuthContext.Provider的上下文范围，所以useContext只能拿到默认值。

看App.tsx里的路由配置：

<Route path="/" element={UserIndexPage()} />
<Route path="/login" element={UserLoginPage()} />

这种写法会在App组件渲染时立即执行UserIndexPage()和UserLoginPage()，生成的React元素不属于Provider的子树，自然无法访问Provider传递的上下文值。

修复步骤 #

把Route的element属性改成JSX组件语法，让组件作为Provider的子组件被挂载：

修改App.tsx中的路由部分：

<Routes>
  <Route path="/" element={<UserIndexPage />} />
  <Route path="/login" element={<UserLoginPage />} />
</Routes>

原理说明 #

• React组件必须通过<Component />的JSX语法声明，才能被React正确挂载到组件树中，继承上层的Context上下文。
• 直接调用组件函数（如Component()）会返回一个React元素，但这个元素的创建时机是在父组件渲染时，不属于正常的组件树层级，无法关联到Provider的上下文。

额外检查点 #

1. 确认Consumer组件中导入的AuthContext和Provider中导出的是同一个实例，避免因路径错误导致的上下文不匹配。
2. 确保Provider确实包裹了所有需要访问上下文的组件（修改后，路由内的组件已处于Provider包裹范围内）。

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