solidjs router 默认会卸载离开的页面组件，导致返回时重新渲染。本文介绍如何通过 createroot 手动管理组件生命周期，实现页面“缓存式”导航，避免重复挂载与状态丢失。
solidjs router 默认会卸载离开的页面组件，导致返回时重新渲染。本文介绍如何通过 createroot 手动管理组件生命周期，实现页面“缓存式”导航，避免重复挂载与状态丢失。
在 SolidJS 中，Router 的设计哲学是按需渲染、严格生命周期控制：每当路由切换，原组件会被自动 dispose()，其响应式依赖、事件监听器及 DOM 节点均被清理。这虽保障了内存安全与状态纯净，但在多页单应用（SPA）场景下，常导致用户感知明显的“闪退感”——例如从 /Home 跳转至 /User 后点击浏览器后退，Home 组件重新执行 onMount、重置所有本地状态（如表单输入、滚动位置、加载状态等）。
要实现类似浏览器标签页的“页面保活”效果（即组件实例不销毁，仅切出/切入），核心思路是绕过 Router 的自动销毁机制，将目标组件托管至一个独立的、不受路由控制的响应式根（Root）中，并手动控制其生命周期。
✅ 推荐方案：使用 createRoot 托管持久化组件
createRoot 创建一个独立的响应式上下文，其返回的函数可显式调用以释放资源。我们将页面组件包裹进 createRoot，并将其返回值（一个无参数的 Component）作为 Route 的 component 属性传入——此时 Router 仅负责显示该组件，不再介入其创建或销毁：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
import {
Link, Route, Router, Routes,
hashIntegration
} from '@solidjs/router';
import { Component, createRoot, onMount, onCleanup } from 'solid-js';
import { render } from 'solid-js/web';
const Home = () => {
onMount(() => console.log('Home mounted — state preserved!'));
// 示例：模拟持久化状态
const [count, setCount] = createSignal(0);
return (
<div>
<h2>Home Page</h2>
<p>Counter: {count()}</p>
<button onclick="{()"> setCount(c => c + 1)}>+</button>
<link href="/user">→ Go to User
</div>
);
};
// ✅ 关键：用 createRoot 托管 Home，避免被 Router 销毁
let disposeHome: () => void;
const PersistentHome = createRoot((disposer) => {
disposeHome = disposer;
return <home></home>;
}) as unknown as Component;
// 可选：在页面卸载时清理（如需完全释放）
// window.addEventListener('beforeunload', () => disposeHome?.());
const User = () => {
onMount(() => console.log('User mounted'));
return (
<div>
<h2>User Page</h2>
<link href="/home">← Back to Home
</div>
);
};
const App = () => (
<router source="{hashIntegration()}"><nav><ul style="{{" display: gap:>
<li>
<link href="/home">Home</li>
<li>
<link href="/user">User</li>
</ul></nav><main><routes><route path="/home" component="{PersistentHome}"></route><route path="/user" component="{User}"></route></routes></main></router>
);
render(App, document.body);
⚠️ 注意事项与权衡
- 内存管理责任转移：使用 createRoot 后，你需自行决定何时调用 dispose()。若长期驻留大量页面组件，可能引发内存泄漏。建议结合 onCleanup 或路由守卫，在确定永久离开时再释放（例如用户登出、切换主模块时）。
- 状态隔离性减弱：保活组件会持续持有其闭包状态和信号引用，若组件依赖全局 store 或 props 动态变化，需额外处理更新逻辑（如监听 useParams 变化并手动刷新）。
- 不适用于所有场景：对纯展示页、表单草稿页、带复杂动画的页面最有效；而对强时效性内容（如实时仪表盘、消息列表），仍建议保留默认销毁行为以确保数据新鲜度。
- 替代方案（如 createMemo）无法触发 onDispose，故不推荐用于需要清理副作用的场景。
✅ 总结
SolidJS Router 的“销毁即常态”并非缺陷，而是响应式范式的主动选择。当业务需要页面级状态持久化时，createRoot 是官方认可、轻量可控的破局方案。它不修改 Router 行为，也不引入第三方库，仅通过组合式生命周期管理，即可达成接近原生多标签页的用户体验。合理运用此模式，你既能享受 Solid 的高性能，又能兼顾用户对流畅导航的期待。
