React路由跳转后如何避免Dashboard组件重加载并保留筛选结果

问题根源 #

你当前使用Route的component属性传入组件的写法，会导致每次路由命中对应路径时，React Router自动创建全新的组件实例，触发完整的组件卸载/挂载生命周期，因此从详情页返回Dashboard时，组件原有内部state全部丢失，触发全量重加载。

可选解决方案 #

方案1：筛选状态同步到URL查询参数（最推荐） #

该方案无需修改现有路由结构，同时支持页面刷新、链接分享时仍然保留筛选状态：

• Dashboard组件内筛选条件变更时，通过history.push将筛选参数拼接至当前URL的search段，例如筛选后地址变为https://localhost:3000?type=xxx&keyword=yyy
• Dashboard组件初始化时优先读取location.search中的参数，用参数过滤/请求对应数据，而非每次默认加载全量1000条记录
• 详情页的返回按钮直接调用history.goBack()即可，返回时自动携带之前的查询参数，筛选状态自然保留

方案2：修改路由渲染逻辑避免组件卸载 #

如果不需要支持刷新保留状态，只想解决跳转返回的状态丢失问题，可以修改Route的渲染属性，改用children属性渲染组件，路由不匹配时仅隐藏组件不触发卸载：

<div>
  <HeaderComponent></HeaderComponent>
  {/* 路由匹配时才渲染组件，不匹配时不卸载实例 */}
  <Route exact path={"/"} children={({ match }) => match && <Dashboard />} />
  <Route exact path={Routes.Details} component={DetailsComponent} />
  <ScrollToTop />
</div>

注意：该方案会让Dashboard组件一直保留在DOM树中，需自行处理组件隐藏时的副作用清理，避免不必要的定时器、事件监听占用资源

方案3：状态持久化到本地存储 #

将Dashboard的筛选条件、列表数据存入sessionStorage实现缓存：

• 每次Dashboard的筛选状态、列表数据变更时，序列化后存入sessionStorage
• 组件挂载时优先读取sessionStorage中的缓存数据，存在缓存则直接用缓存渲染，无缓存再加载全量数据
• 可根据业务需求设置缓存失效规则，比如退出登录、手动刷新页面时清空缓存

方案4：全局状态管理存储 #

如果项目已接入Redux、Zustand、MobX等全局状态管理工具，直接将Dashboard的筛选状态、列表数据存储在全局store中即可，组件卸载时store数据不会丢失，返回时直接从store读取数据渲染。

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