SolidJS Router 页面切换时组件状态保持不销毁解决方案

SolidJS Router 默认会在路由离开时卸载所有组件，虽然这能确保内存释放，但实际使用中会带来困扰：当用户返回上一页时，之前的状态（如表单数据、滚动位置）都会丢失，组件需要从头挂载。本文将深入讲解如何利用 createRoot 手动接管组件的生命周期，让路由切换不再重复“销毁与重建”的流程，而是像浏览器的原生前进后退一样，完美保留页面状态。

要深入理解这个问题，首先需要了解 SolidJS 中 的工作机制。其设计哲学强调按需渲染和严格的生命周期管理：当路由切换时，原组件会依次触发 onCleanup，DOM 被移除，响应式依赖被释放，从而确保内存安全和状态纯净。但矛盾在于，用户并不希望每次返回页面时都像首次进入一样重新填写表单、重新加载图片、滚动条回到顶部。这正是最常遇到的需求冲突。

如果直接使用 ，Home 组件会在路由离开时被销毁。解决思路并非禁用卸载行为——那会违背 Solid 的响应式设计原则。正确做法是：将组件从 Router 的生命周期管理中独立出来，自行控制其存在周期。而 createRoot 正是实现这一目标的核心工具。

来看具体怎么做：

import { createRoot, onMount } from 'solid-js';
import { Route, Router, Routes, hashIntegration } from '@solidjs/router';

const Home = () => {
  onMount(() => console.log('Home mounted — only once'));
  return 
Home Page (state preserved!)
;
};

// ✅ 关键：用 createRoot 包裹组件，返回一个静态 Component
let disposeHome: () => void;
const cachedHome = createRoot((disposer) => {
  disposeHome = disposer;
  return ;
}) as unknown as Component;

// 可选：在页面卸载时清理（如 SPA 全局退出）
window.addEventListener('beforeunload', () => disposeHome());

const App = () => (
  
    
      Home
      User
    
    
      
       
User Page
} />
    
  
);

几个需要留意的地方：

• 使用 createRoot 缓存的组件不会再自动响应路由参数变化（例如 params、search）。如果仍需动态数据，应手动在组件内部订阅 useLocation() 或 useParams()，并确保副作用被正确清理。
• 注意不要对 cachedHome 重复调用 createRoot —— 每个 createRoot 仅初始化一次，后续只需复用其返回的组件引用即可。
• 如果需要缓存多个页面（例如 Home 和 User 均希望保留状态），则应为每个页面单独创建 createRoot，并分别管理各自的 dispose 函数。
• onMount 和 onCleanup 依然正常触发，但它们仅会在首次挂载和最终销毁时执行一次，不会因为路由切换而重复调用。

该方案的本质在于将组件从“路由驱动的生命周期”迁移至“应用级持久化生命周期”。它在性能可控与用户体验之间取得了良好的平衡。尽管 SolidJS 官方目前尚未提供类似 Vue KeepAlive 的内置方案，但借助 createRoot 已经足够可靠——它既不破坏响应式原理，也不增加额外的状态管理负担，是一种符合 Solid 设计哲学的简洁解法。