如何在React组件中存储搜索结果，避免切页或刷新后丢失原有数据

不需要引入Redux的轻量实现方案 #

• React Router 路由状态携带（适配v6+版本）
  React Router 原生支持路由跳转时携带隐式状态，你无需修改现有组件的核心逻辑，只需要做两处调整：
  1. 搜索页面组件挂载时，优先读取useLocation()返回的state数据初始化内部状态：

  import { useLocation } from 'react-router-dom';
  // 组件内代码
  const { state } = useLocation();
  const [searchKeyword, setSearchKeyword] = useState(state?.savedKeyword || '');
  const [searchResult, setSearchResult] = useState(state?.savedResult || []);
  

  2. 所有跳转到其他页面的逻辑，携带当前搜索的关键词和结果存入路由状态：

  import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  // 跳转时调用
  navigate('/target-page', {
    state: { savedKeyword: searchKeyword, savedResult: searchResult }
  });
  

  该方案数据仅在路由上下文生效，不会污染全局状态，完全符合你当前单组件使用数据的场景。
• 路由组件缓存（KeepAlive）
  可以引入轻量的React路由缓存组件，或自行实现简单的缓存逻辑：匹配到搜索页面路由时仅隐藏DOM、不卸载组件，返回时直接显示已渲染的内容，所有内部state都会完整保留，不需要修改现有搜索逻辑。
• URL参数存储搜索关键词
  将搜索关键词拼接在搜索页面URL后，例如/cocktail-search?q=Margarita，组件挂载时读取URL的q参数，存在就自动发起搜索。该方案额外支持搜索结果页直接分享，其他用户打开链接即可看到对应搜索结果。

刷新页面后保留结果的实现方案 #

不需要必须使用localStorage，可根据需求选择：

• 如果可以接受刷新后重新发起一次搜索请求，直接使用上面的URL参数方案即可，刷新后URL参数不会丢失，组件读取参数自动搜索即可，无需本地存储。
• 如果希望刷新后不发起新请求直接展示原有结果，再选择将搜索关键词+结果存入localStorage（永久存储，直到用户清理缓存）或sessionStorage（仅当前会话有效，关闭浏览器就清除），组件挂载时优先读取存储内的数据即可，注意新增关键词搜索时要覆盖旧的存储内容，避免数据残留。

原有Redux方案的适用场景 #

如果你后续有跨页面复用搜索数据的需求（例如全站展示最近搜索的鸡尾酒卡片），再考虑用Redux存储相关数据，当前仅单页面使用的场景下，上面的轻量方案复杂度更低、更适配需求。

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