新增404页面路由处理,优化未匹配路径的用户体验。将默认重定向至NotFoundPage,以提升系统的可用性和用户友好性。
This commit is contained in:
@@ -14,6 +14,7 @@ import { PaymentPage } from './pages/payment/PaymentPage'
|
|||||||
import { SitePage } from './pages/site/SitePage'
|
import { SitePage } from './pages/site/SitePage'
|
||||||
import { QRCodesPage } from './pages/qrcodes/QRCodesPage'
|
import { QRCodesPage } from './pages/qrcodes/QRCodesPage'
|
||||||
import { MatchPage } from './pages/match/MatchPage'
|
import { MatchPage } from './pages/match/MatchPage'
|
||||||
|
import { NotFoundPage } from './pages/not-found/NotFoundPage'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@@ -35,7 +36,7 @@ function App() {
|
|||||||
<Route path="qrcodes" element={<QRCodesPage />} />
|
<Route path="qrcodes" element={<QRCodesPage />} />
|
||||||
<Route path="match" element={<MatchPage />} />
|
<Route path="match" element={<MatchPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
29
soul-admin/src/pages/not-found/NotFoundPage.tsx
Normal file
29
soul-admin/src/pages/not-found/NotFoundPage.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user