更新移动端导航栏,将原有的<a>标签替换为<Link>组件,提升路由导航的可维护性和一致性。

This commit is contained in:
zyh
2025-04-10 04:09:12 +00:00
parent 110b3e220f
commit da05e3a4a1

View File

@@ -5,7 +5,9 @@ import {
RouterProvider,
Outlet,
Navigate,
useLocation
useLocation,
useNavigate,
Link
} from 'react-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import dayjs from 'dayjs';
@@ -224,33 +226,33 @@ const MobileLayout = () => {
{/* 底部导航栏 */}
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg">
<div className="flex justify-around">
<a
href="/mobile"
<Link
to="/mobile"
className={`flex flex-col items-center py-2 px-4 ${
location.pathname === '/mobile' ? 'text-blue-600' : 'text-gray-500'
}`}
>
<div className="text-xl mb-1">🏠</div>
<span className="text-xs"></span>
</a>
<a
href="/mobile/notifications"
</Link>
<Link
to="/mobile/notifications"
className={`flex flex-col items-center py-2 px-4 ${
location.pathname === '/mobile/notifications' ? 'text-blue-600' : 'text-gray-500'
}`}
>
<div className="text-xl mb-1">🔔</div>
<span className="text-xs"></span>
</a>
<a
href="/mobile/profile"
</Link>
<Link
to="/mobile/profile"
className={`flex flex-col items-center py-2 px-4 ${
location.pathname === '/mobile/profile' ? 'text-blue-600' : 'text-gray-500'
}`}
>
<div className="text-xl mb-1">👤</div>
<span className="text-xs"></span>
</a>
</Link>
</div>
</nav>
</div>