React Router Dom useNavigate致应用重载丢失状态 求解决方案

当使用useNavigate(-1)后退时，页面状态重置的核心原因是目标页面的组件被重新挂载，导致组件内部state、依赖的Redux/Context状态在组件初始化时回到初始值。以下是几种可行的解决方法：

1. 状态持久化存储 #

将需要保留的状态存入localStorage或sessionStorage，在组件挂载时读取并恢复状态：

组件内部state示例 #

import { useState, useEffect } from 'react';

function TargetPage() {
  const [count, setCount] = useState(() => {
    // 初始化时从localStorage读取
    const saved = localStorage.getItem('pageCount');
    return saved ? JSON.parse(saved) : 0;
  });

  useEffect(() => {
    // 状态更新时同步到localStorage
    localStorage.setItem('pageCount', JSON.stringify(count));
  }, [count]);

  // ...其他逻辑
}

Redux状态持久化 #

使用redux-persist库，将Redux store中的状态持久化到本地存储：

// store配置示例
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认用localStorage
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['需要持久化的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';

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          {/* 路由配置 */}
        </BrowserRouter>
      </PersistGate>
    </Provider>
  );
}

2. 避免组件卸载（路由缓存） #

React本身没有内置的组件缓存功能，可以通过第三方库或自定义逻辑实现路由组件的缓存，让后退时组件不重新挂载：

使用react-keep-alive示例 #

import { KeepAlive } from 'react-keep-alive';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/target" element={<KeepAlive><TargetPage /></KeepAlive>} />
        {/* 其他路由 */}
      </Routes>
    </BrowserRouter>
  );
}

自定义缓存逻辑 #

在父组件中用状态保存已渲染的路由组件实例，避免卸载：

import { useState } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';

function App() {
  const [cachedComponents, setCachedComponents] = useState({});
  const location = useLocation();

  return (
    <Routes location={location}>
      <Route 
        path="/target" 
        element={
          cachedComponents['TargetPage'] ?? (
            <TargetPage ref={(el) => el && setCachedComponents(prev => ({...prev, TargetPage: el}))} />
          )
        } 
      />
    </Routes>
  );
}

注意：这种方式需要组件支持ref，函数组件需要用forwardRef包裹。

3. 状态提升到共享父组件 #

将需要保留的状态提升到所有路由组件的共同父组件中，这样后退时父组件不会卸载，状态得以保留：

function App() {
  // 把需要跨页面保留的状态放在这里
  const [sharedState, setSharedState] = useState(initialValue);

  return (
    <BrowserRouter>
      {/* 通过Context传递状态给子组件 */}
      <SharedStateContext.Provider value={{ sharedState, setSharedState }}>
        <Routes>
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
        </Routes>
      </SharedStateContext.Provider>
    </BrowserRouter>
  );
}

4. 检查路由配置问题 #

确保后退的目标路由没有导致组件强制重新挂载的配置：

• 不要给路由组件添加随机key属性，否则每次路由切换都会重新挂载组件
• 开发模式下的React.StrictMode会触发两次挂载，可能导致状态重置，生产模式下该问题会消失

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