如何在React Router组件中使用Context Provider

修复方案 #

1. 修正拼写错误
   你给出的Route写法里Provider闭合标签拼写错误：</HeaderCOntextProvider> 中Context的字母O大写，和开头标签不匹配，先修正为完全一致的</HeaderContextProvider>。

2. 统一Provider层级，不要拆分多个实例
   给每个路由单独包裹HeaderContextProvider会导致每个路由对应独立的Context状态实例，不同路由修改的状态互不共享，Header组件自然无法拿到更新后的值。
   正确做法是仅在应用最外层包裹一次HeaderContextProvider，让Header组件、所有路由组件都在同一个Provider的子节点下，共享同一份状态：

// App.js 最外层结构
<HeaderContextProvider>
  <Header />
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/company" element={<Company />} />
      {/* 其余路由保持正常定义即可 */}
    </Routes>
  </BrowserRouter>
</HeaderContextProvider>

3. 补全useEffect依赖数组
   页面组件中调用setHeader的useEffect没有加空依赖数组，会导致每次组件重渲染都重复执行更新逻辑，部分场景下会触发状态更新异常。修改为添加空依赖数组，保证仅在组件挂载时执行一次标题设置：

const { setHeader } = useContext(HeaderContext);

useEffect(() => {
    setHeader("Company Dashboard");
    document.title = "Company Dashboard"
}, [])

4. 确认Header组件消费逻辑正确
   检查Header组件是否直接消费Context的状态值，不要用本地state缓存Context的值：

// 正确写法，Context更新时会自动触发重渲染
const { header } = useContext(HeaderContext)

// 错误写法，仅在组件挂载时赋值一次，后续Context更新不会同步
const [title, setTitle] = useState(useContext(HeaderContext).header)

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