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

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

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

直接使用 会导致 Home 组件随路由退出而销毁。解决思路不是禁用卸载逻辑（这违背 Solid 的响应式范式），而是将组件脱离 Router 的生命周期管理，交由开发者自主控制其存在周期。

核心方案是使用 createRoot 创建一个独立的、不受路由影响的响应式根节点：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

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 包裹组件，返回一个静态 Component
let disposeHome: () => void;
const cachedHome = createRoot((disposer) => {
  disposeHome = disposer;
  return <home></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><route path="/user" component="{()"><div>User Page</div>} />
    </route></routes></router>
);

⚠️ 注意事项：

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

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