如何在SolidJS中实现不修改URL的路由导航

如果你想在SolidJS中切换页面但不修改URL，完全可以脱离传统的基于路径的路由系统，通过状态驱动组件渲染来实现需求。以下是两种实用方案：

方案一：全局信号（Signal）控制页面切换 #

利用SolidJS的响应式信号存储当前页面标识，根据标识渲染对应组件，全程不涉及URL变更。

步骤1：创建全局状态管理文件 #

// src/store.ts
import { createSignal } from "solid-js";

// 定义允许的页面类型
type PageType = 'home' | 'about' | 'profile';

// 初始化页面（默认首页）
const initialPage: PageType = 'home';
export const [currentPage, setCurrentPage] = createSignal<PageType>(initialPage);

步骤2：在根组件中实现导航与页面渲染 #

// src/App.tsx
import { currentPage, setCurrentPage } from './store';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';

function App() {
  return (
    <div class="app-container">
      {/* 导航按钮组 */}
      <div class="nav">
        <button onClick={() => setCurrentPage('home')}>首页</button>
        <button onClick={() => setCurrentPage('about')}>关于我们</button>
        <button onClick={() => setCurrentPage('profile')}>个人中心</button>
      </div>

      {/* 根据当前状态渲染对应页面 */}
      <div class="page-content">
        {currentPage() === 'home' && <Home />}
        {currentPage() === 'about' && <About />}
        {currentPage() === 'profile' && <Profile />}
      </div>
    </div>
  );
}

export default App;

方案二：持久化状态（刷新页面保留当前视图） #

如果需要刷新页面后仍保持当前选中的页面，可以将状态持久化到localStorage：

// src/store.ts
import { createSignal } from "solid-js";

type PageType = 'home' | 'about' | 'profile';

// 从localStorage读取初始值，不存在则默认首页
const initialPage: PageType = (localStorage.getItem('currentPage') as PageType) || 'home';

export const [currentPage, setCurrentPage] = createSignal<PageType>(initialPage, {
  // 状态变更时同步到localStorage
  onSet: (newPage) => localStorage.setItem('currentPage', newPage)
});

方案说明 #

• 这种方式完全脱离URL路由，适合不需要页面链接分享、仅在单应用内切换视图的场景。
• 所有页面切换通过触发状态更新实现，无需手动输入任何路径，完全符合你的需求。
• 若后续需要支持URL同步，只需将状态与路由路径做绑定即可，改造成本低。

内容的提问来源于stack exchange，提问作者Y.Coding