SolidJS Router 页面缓存与路由复用实践指南

SolidJS Router 默认行为是离开时卸载页面组件，造成 history.back() 时重新挂载。本文将深入讲解如何利用 createRoot 手动管理组件生命周期，实现页面状态持久化与路由复用，提升应用性能。

使用 SolidJS Router 的开发者常会遇到一个问题：它的默认策略是“离开即销毁”——当导航离开页面时，对应组件会被完全卸载，所有响应式依赖和副作用（如 onMount、onCleanup）均被清除。从设计上这保证了状态纯净和内存安全，但在需要频繁切换的场景（例如“首页 → 用户页 → 返回首页”）中，这种卸载机制会引发重复初始化、状态丢失，甚至明显的性能开销。

那么，如何绕过这种自动销毁机制呢？核心思路十分简洁：将目标组件提前脱离当前响应式上下文，由开发者手动接管其生命周期管理。SolidJS 内置的 createRoot 正是为此而生——它会创建一个独立于父级信号的响应式根，并返回一个可手动调用的 dispose 函数。这样一来，组件便不会再因路由切换而被自动清除，从而实现页面缓存与状态保持。

下面提供一个可直接运行的具体实现方案：

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!'));
  onCleanup(() => console.log('Home cleanup — will NOT trigger on back()'));
  // ✅ 假设此处有表单输入、滚动位置、加载状态等需保留的数据
  return