React路由二次进入/config页面丢失用户操作无缓存的解决办法

默认React Router的路由匹配逻辑是，当路径离开对应路由规则时，会直接卸载该路由绑定的组件，组件内部的所有状态、未持久化的DOM操作都会被清除，下次路径匹配到该路由时，会创建全新的组件实例进行挂载，所以会出现第二次进入配置页丢失之前操作的情况。

• 方案1：复用已有的上层状态（最适配你当前的开发逻辑） #

你已经实现了保存时更新App.js主组件的状态，直接将App.js中存储的配置数据作为props透传给Config组件即可：

// App.js 核心代码
import { useState } from 'react'
import { Routes, Route } from 'react-router-dom'
import Home from './Home'
import Config from './Config'

function App() {
  // 已经存在的全局配置状态
  const [savedConfig, setSavedConfig] = useState({
    selectedItem: '' // 对应下拉框选择的值
  })

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      {/* 把保存的配置和保存方法传给Config组件 */}
      <Route path="/config" element={
        <Config 
          savedConfig={savedConfig} 
          onSave={(newConfig) => setSavedConfig(newConfig)} 
        />
      } />
    </Routes>
  )
}

Config组件内把下拉框改为受控组件，绑定值直接读取传入的savedConfig：

// Config.js 核心代码
import { useNavigate } from 'react-router-dom'

function Config({ savedConfig, onSave }) {
  const navigate = useNavigate()
  const handleSelect = (e) => {
    // 临时更新可以存在内部state，保存时再同步到上层，也可以直接同步上层
  }
  const handleSave = () => {
    // 拿到当前选择的值调用onSave更新App状态
    onSave({ selectedItem: 你的下拉框当前值 })
    navigate('/')
  }

  return (
    <div>
      {/* 下拉框默认值/绑定值取已保存的配置 */}
      <select value={savedConfig.selectedItem} onChange={handleSelect}>
        {/* 下拉选项 */}
      </select>
      <button onClick={handleSave}>保存</button>
    </div>
  )
}

这个方案不需要额外引入依赖，配置数据跟随App组件生命周期，刷新页面才会丢失，如果需要持久化可以进一步把savedConfig存在localStorage里。

• 方案2：全局状态管理 #

如果项目复杂度较高，不想逐层透传props，可以引入轻量全局状态库或者Redux存储配置数据，Config组件直接从全局状态中读写配置值，效果和状态提升一致。

• 方案3：缓存路由组件 #

如果你不需要持久化配置，只是希望同一会话内跳转回来保留所有临时操作（包括未保存的DOM变更），可以使用社区的缓存路由组件替换默认的Route组件，实现跳转时不卸载Config组件，自然保留所有内部状态和DOM修改，缺点是配置数据会在页面刷新后丢失。

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