React路由场景下刷新页面数据消失的解决方法（无需withRouter）

核心原因 #

页面刷新时浏览器会重置JavaScript执行环境，Redux默认存储在内存中的状态会被清空，导致数据丢失；另外也可能是路由刷新时数据请求未正确触发。

具体解决办法 #

1. 持久化Redux状态 #

把Redux状态保存到本地存储（localStorage/sessionStorage），刷新后自动恢复，两种实现方式：

手动实现

在reducer中初始化和更新状态时同步到localStorage：

const initialState = {
  questions: JSON.parse(localStorage.getItem('questions')) || []
};

function questionsReducer(state = initialState, action) {
  switch(action.type) {
    case 'GET_QUESTIONS_SUCCESS':
      const newState = { ...state, questions: action.payload };
      localStorage.setItem('questions', JSON.stringify(newState.questions));
      return newState;
    default:
      return state;
  }
}

使用redux-persist库

这是更成熟的方案，支持复杂状态结构：

• 安装依赖：npm install redux-persist
• 配置store：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import { combineReducers, createStore } from 'redux';

const persistConfig = {
  key: 'root',
  storage,
};

const rootReducer = combineReducers({
  questions: questionsReducer // 替换成你的实际reducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

• 在根组件中包裹PersistGate：

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

2. 确保数据请求在刷新时触发 #

通过监听路由变化，保证每次页面刷新或路由切换都重新请求数据：

import { useLocation } from 'react-router-dom';

function App () {
    const dispatch = useDispatch();
    const location = useLocation();

    useEffect(() => {
        dispatch(getQuestions());
    }, [dispatch, location]);

    return (
        <Routes>
            <Route exact path="/" element={<Layout/>}>
                <Route path="repetition" element={<Repetition/>}/>
                <Route path="family" element={<Family/>}/>
            </Route>
        </Routes>
    );
}

3. 完善异步请求的错误处理 #

确保数据请求的错误被捕获，避免因请求失败导致状态为空：

useEffect(() => {
    const fetchQuestions = async () => {
        try {
            await dispatch(getQuestions());
        } catch (error) {
            console.error('获取问题数据失败:', error);
            // 可添加错误提示逻辑
        }
    };
    fetchQuestions();
}, [dispatch]);

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