新增404页面路由处理,优化未匹配路径的用户体验。将默认重定向至NotFoundPage,以提升系统的可用性和用户友好性。

This commit is contained in:
乘风
2026-02-09 11:27:56 +08:00
parent 6d7e06449f
commit bee72dc7f8
2 changed files with 31 additions and 1 deletions

View File

@@ -14,6 +14,7 @@ import { PaymentPage } from './pages/payment/PaymentPage'
import { SitePage } from './pages/site/SitePage'
import { QRCodesPage } from './pages/qrcodes/QRCodesPage'
import { MatchPage } from './pages/match/MatchPage'
import { NotFoundPage } from './pages/not-found/NotFoundPage'
function App() {
return (
@@ -35,7 +36,7 @@ function App() {
<Route path="qrcodes" element={<QRCodesPage />} />
<Route path="match" element={<MatchPage />} />
</Route>
<Route path="*" element={<Navigate to="/dashboard" replace />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
)
}

View File

@@ -0,0 +1,29 @@
import { Link, useLocation } from 'react-router-dom'
import { Home, AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
export function NotFoundPage() {
const location = useLocation()
return (
<div className="min-h-screen bg-[#0a1628] flex items-center justify-center p-8">
<div className="text-center max-w-md">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-500/20 text-red-400 mb-6">
<AlertCircle className="w-10 h-10" />
</div>
<h1 className="text-4xl font-bold text-white mb-2">404</h1>
<p className="text-gray-400 mb-1"></p>
<p className="text-sm text-gray-500 font-mono mb-8 break-all">{location.pathname}</p>
<Button
asChild
className="bg-[#38bdac] hover:bg-[#2da396] text-white"
>
<Link to="/">
<Home className="w-4 h-4 mr-2" />
</Link>
</Button>
</div>
</div>
)
}