路由和导航

灵动桌面框架使用 React Router 7.13+ 管理页面路由，采用 HashRouter 模式。

路由配置

// src/Router.tsx
import { HashRouter, Routes, Route } from 'react-router-dom'
import AppLayout from '@/components/layout/AppLayout'
import HomePage from '@/pages/home'
import SettingsPage from '@/pages/settings'
import AboutPage from '@/pages/about'

export default function Router() {
  return (
    <HashRouter>
      <Routes>
        <Route element={<AppLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/settings" element={<SettingsPage />} />
          <Route path="/about" element={<AboutPage />} />
        </Route>
      </Routes>
    </HashRouter>
  )
}

为什么用 HashRouter

桌面应用使用 file:// 协议加载页面，BrowserRouter 的 pushState 不兼容。HashRouter 通过 URL hash (#/path) 实现路由，完美适配桌面环境。

侧边栏导航

// src/components/layout/Sidebar.tsx
import { Menu } from 'antd'
import { Home, Settings, Info } from 'lucide-react'
import { useNavigate, useLocation } from 'react-router-dom'

const menuItems = [
  { key: '/', icon: <Home size={16} />, label: '首页' },
  { key: '/settings', icon: <Settings size={16} />, label: '设置' },
  { key: '/about', icon: <Info size={16} />, label: '关于' },
]

export default function Sidebar() {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <Menu
      mode="inline"
      selectedKeys={[location.pathname]}
      items={menuItems}
      onClick={({ key }) => navigate(key)}
    />
  )
}

添加新页面

1. 创建页面组件 src/pages/my-page/index.tsx
2. 在 Router.tsx 添加路由
3. 在 Sidebar.tsx 添加菜单项

// 1. 页面组件
export default function MyPage() {
  return <div className="p-6">新页面</div>
}

// 2. 路由
<Route path="/my-page" element={<MyPage />} />

// 3. 菜单项
{ key: '/my-page', icon: <Star size={16} />, label: '新页面' }