/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 底部导航组件
|
*/
|
import React from 'react';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
const BottomNavigation: React.FC = () => {
|
const navigate = useNavigate();
|
const location = useLocation();
|
|
// 判断当前页面是否为首页
|
const isHome = location.pathname === '/';
|
const isProfile = location.pathname === '/profile';
|
|
const handleNavigation = (route: string) => {
|
if (route === 'home') {
|
navigate('/');
|
} else if (route === 'profile') {
|
navigate('/profile');
|
}
|
};
|
|
return (
|
<div className="bottom-nav">
|
<div
|
className={`nav-item ${isHome ? 'active' : ''}`}
|
onClick={() => handleNavigation('home')}
|
>
|
<i className="fas fa-home"></i>
|
<span>首页</span>
|
</div>
|
<div
|
className={`nav-item ${isProfile ? 'active' : ''}`}
|
onClick={() => handleNavigation('profile')}
|
>
|
<i className="fas fa-user"></i>
|
<span>我的</span>
|
</div>
|
</div>
|
);
|
};
|
|
export default BottomNavigation;
|
