SolidJS Router 页面切换时保持组件状态不销毁的解决策略

solidjs router 默认会在路由切换时卸载组件，导致返回时重新渲染。本文介绍如何通过 createroot 手动管理组件生命周期，实现页面“缓存式”导航，避免重复挂载与状态丢失。

solidjs router 默认会在路由切换时卸载组件，导致返回时重新渲染。本文介绍如何通过 createroot 手动管理组件生命周期，实现页面“缓存式”导航，避免重复挂载与状态丢失。

在 SolidJS 中，<Router> 的设计哲学是按需渲染、严格生命周期控制：当用户离开某一路由时，对应组件会被自动卸载（onCleanup 触发、DOM 移除、响应式依赖释放），这是保障内存安全与状态纯净的默认行为。但这也带来一个常见需求矛盾：用户期望像浏览器原生前进/后退（如 history.back()）那样保留页面状态——例如表单输入、滚动位置、加载中的 UI 等，而非每次返回都触发全新挂载。

直接使用 <Route component={Home} /> 会导致 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 <div>Home Page (state preserved!)</div>;};// ✅ 关键：用 createRoot 包裹组件，返回一个静态 Componentlet disposeHome: () => void;const cachedHome = createRoot((disposer) => {  disposeHome = disposer;  return <Home />;}) as unknown as Component;// 可选：在页面卸载时清理（如 SPA 全局退出）window.addEventListener('beforeunload', () => disposeHome());const App = () => (  <Router source={hashIntegration()}>    <nav>      <a href="#/home">Home</a>      <a href="#/user">User</a>    </nav>    <Routes>      <Route path="/home" component={cachedHome} />      <Route path="/user" component={() => <div>User Page</div>} />    </Routes>  </Router>);

⚠️ 注意事项：

• createRoot 返回的组件不再响应路由参数变化（如 params, search）。若需动态数据，请配合 useLocation() 或 useParams() 在组件内部订阅，并确保副作用正确清理。
• 不要对 cachedHome 多次调用 createRoot —— 每个 createRoot 应仅初始化一次，复用其返回的组件引用。
• 若需支持多页缓存（如 Home + User 都需保留），需为每个页面单独创建并管理 createRoot 实例及对应的 dispose 函数。
• onMount / onCleanup 仍有效，但只在首次挂载和最终销毁时触发，不会因路由进出反复执行。

该方案本质是将组件从“路由驱动生命周期”迁移至“应用级持久化生命周期”，兼顾性能可控性与用户体验一致性。虽然 SolidJS 官方暂未内置 <KeepAlive> 类似能力（如 Vue 的 keep-alive），但 createRoot 提供了足够底层且可靠的替代路径——它不破坏响应式原理，也不引入额外状态管理开销，是符合 Solid 设计哲学的地道解法。