47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { BuildFooter } from './BuildFooter'
|
|
import { NavLink, Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
|
|
import { SourceButton, ThemeToggle } from '@shared/ui'
|
|
import { Compare } from './pages/Compare'
|
|
import { Line } from './pages/Line'
|
|
import { Overview } from './pages/Overview'
|
|
|
|
function LineRoute() {
|
|
const { id } = useParams()
|
|
return <Line key={id} />
|
|
}
|
|
|
|
export function App() {
|
|
const location = useLocation()
|
|
const ipv6 = location.pathname.endsWith('~ipv6') || new URLSearchParams(location.search).get('ip_version') === 'ipv6'
|
|
const familyQuery = ipv6 ? '?ip_version=ipv6' : ''
|
|
return (
|
|
<>
|
|
<header className="topbar">
|
|
<div className="inner">
|
|
<nav className="topnav">
|
|
<NavLink to={`/${familyQuery}`} end className={({ isActive }) => (isActive ? 'active' : '')}>
|
|
总览
|
|
</NavLink>
|
|
<NavLink to={`/compare${familyQuery}`} className={({ isActive }) => (isActive ? 'active' : '')}>
|
|
对比
|
|
</NavLink>
|
|
<a href="/admin/">管理</a>
|
|
</nav>
|
|
<SourceButton variant="status" />
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
<Routes>
|
|
<Route path="/" element={<Overview />} />
|
|
<Route path="/line/:id" element={<LineRoute />} />
|
|
<Route path="/compare" element={<Compare />} />
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
<footer className="site-foot">
|
|
国家和运营商由 <a href="https://ip.007995.xyz/" target="_blank" rel="noreferrer">ip.007995.xyz</a> 查询
|
|
<BuildFooter />
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|