react-router-dom V6结合Context API跨路由状态不更新问题

你的Context定义、Provider包裹层级本身没有错误，状态无法同步和react-router-dom的兼容性无关，核心是两个路由场景的逻辑问题：

• 当你访问/PC路径时，<Routes>只会渲染当前URL匹配的PC组件，BR1组件处于未挂载状态，自然不会响应Context的状态更新，也不会执行内部的console逻辑
• 如果你点击按钮修改状态后，通过手动输入地址栏、window.location跳转、刷新页面的方式进入/BR1，会触发整个React应用重载，App组件内的useState会重置为初始值false，之前修改的状态会完全丢失

1. 使用官方路由API做无刷新跳转 #

修改PC组件，更新状态后通过react-router-dom提供的useNavigate钩子跳转，避免整页刷新导致状态丢失：

import React, { useContext } from 'react'
import './Profile.css';
import { BRcontext } from '../App';
// 新增导入导航钩子
import { useNavigate } from 'react-router-dom';

export default function Profile() {
    const {value, setValue} = useContext(BRcontext);
    // 初始化导航方法
    const navigate = useNavigate();

    return (
        <div>
            <div className='container mt-5'>
                <div className='row'>
                    <div>
                        <h3 className='mt-5'>Send Request</h3>
                        <button 
                            className='btn btn-success mt-3 ps-3 pe-3' 
                            onClick={()=>{
                                setValue(true);
                                // 路由跳转不触发页面刷新，App组件状态会完整保留
                                navigate('/BR1');
                            }}
                        >
                            Request
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}

修改后点击按钮跳转到/BR1页面，就能正常拿到更新后的value: true。

2. 持久化状态支持跨刷新保留 #

如果需要刷新页面、手动输入地址进入场景下也保留状态，将Context状态同步到本地存储即可，修改App.js代码：

// 新增useEffect导入
import React, { createContext, useState, useEffect } from 'react';
import './App.css';
import {  BrowserRouter as Router,   Routes,  Route } from "react-router-dom";
import BR1 from './Components/BR1';
import PC from './Components/P_c1'
import BR from './Components/BR';

export const BRcontext = createContext();

function App() {
  // 初始化时优先读取本地存储的缓存值
  const [value, setValue] = useState(() => {
    const cacheVal = localStorage.getItem('brContextValue');
    return cacheVal ? JSON.parse(cacheVal) : false;
  });

  // 状态变化时同步写入本地存储
  useEffect(() => {
    localStorage.setItem('brContextValue', JSON.stringify(value));
  }, [value]);

  return (
    <div>
    <BRcontext.Provider value={{value, setValue}}>
      <Router>
        <Routes>
          <Route path='/PC' element={<PC/>} />
          <Route path='/BR1' element={<BR1/>} />
          <Route path='/BR' element={<BR/>} />
        </Routes>
      </Router>
    </BRcontext.Provider>
    </div>
  );
}

export default App;

如果按上述修改后仍有异常，检查两个常见错误：

• 确保整个应用只存在一个BrowserRouter实例，不要在PC、BR1等子组件中重复嵌套Router，否则会造成路由上下文隔离
• 确保所有调用useContext(BRcontext)的组件，导入的都是App.js中导出的同一个BRcontext对象，不要在子组件中重复创建新的Context

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