feat(web): integrate TanStack React Router for client-side routing

Replace state-based screen navigation with proper URL-based routing. This includes:
- New router configuration with routes for sessions, machines, and spawn pages
- App context provider to share API and token across the app
- useAppGoBack hook for handling browser and Telegram back navigation
- Refactored App component to render outlet and use router hooks
- Memory history for Telegram app, browser history for web
This commit is contained in:
weishu
2025-12-20 16:49:10 +08:00
parent f0493ce68d
commit 3bac5c7bc6
7 changed files with 366 additions and 208 deletions
+30
View File
@@ -0,0 +1,30 @@
import { useCallback } from 'react'
import { useLocation, useNavigate, useRouter } from '@tanstack/react-router'
import { isTelegramApp } from '@/hooks/useTelegram'
export function useAppGoBack(): () => void {
const navigate = useNavigate()
const router = useRouter()
const pathname = useLocation({ select: (location) => location.pathname })
return useCallback(() => {
if (!isTelegramApp()) {
router.history.back()
return
}
if (pathname.startsWith('/sessions/')) {
navigate({ to: '/sessions' })
return
}
if (pathname.endsWith('/spawn')) {
navigate({ to: '/machines' })
return
}
if (pathname.startsWith('/machines')) {
navigate({ to: '/sessions' })
}
}, [navigate, pathname, router])
}