修改导航栏
Change-Id: I039a8b88ebc3dc89f95896e63ce78371f2114dc4
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 79a3086..fb3a3e1 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,13 +1,42 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom'; // 引入 useLocation 钩子
+import React, { useState, useEffect } from 'react';
import './Header.css'; // 导入 Header.css 文件
import logo from '../assets/logo.png';
const Header = () => {
- const location = useLocation(); // 获取当前路径
+ const [currentPath, setCurrentPath] = useState(window.location.pathname);
- // 判断路径是否是种子列表相关
- const isSeedListActive = location.pathname.startsWith('/seed-list') || location.pathname.startsWith('/seed/');
+ // 提取所有页面路径，简化 active 类逻辑
+ const navLinks = [
+ { to: '/friend-moments', label: '好友动态' },
+ { to: '/forum', label: '论坛' },
+ { to: '/interest-groups', label: '兴趣小组' },
+ { to: '/seed-list', label: '种子列表' },
+ { to: '/publish-seed', label: '发布种子' },
+ ];
+
+ // 更新当前路径状态
+ useEffect(() => {
+ const handleLocationChange = () => {
+ setCurrentPath(window.location.pathname);
+ };
+
+ // 监听历史记录变化
+ window.addEventListener('popstate', handleLocationChange);
+
+ // 清理事件监听器
+ return () => {
+ window.removeEventListener('popstate', handleLocationChange);
+ };
+ }, []);
+
+ // 判断路径是否是当前活动页面
+ const isActive = (path) => currentPath.startsWith(path);
+
+ // 自定义链接点击逻辑
+ const handleLinkClick = (to) => {
+ window.history.pushState({}, '', to);
+ setCurrentPath(to); // 更新当前路径状态
+ };
return (
<div className="main-page">
@@ -20,17 +49,29 @@
</div>
{/* 右侧用户头像和消息中心 */}
<div className="user-and-message">
- <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
+ {/* 用户头像点击跳转到个人主页 */}
+ <a href="/user/profile">
+ <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
+ </a>
<span className="message-center">消息</span>
</div>
</header>
+
{/* 导航栏 */}
<nav className="nav">
- <Link to="/friend-moments" className="nav-item">好友动态</Link>
- <Link to="/forum" className="nav-item">论坛</Link>
- <Link to="/interest-groups" className="nav-item">兴趣小组</Link>
- <Link to="/seed-list" className={`nav-item ${isSeedListActive ? 'active' : ''}`}>种子列表</Link> {/* 动态添加 active 类 */}
- <Link to="/publish-seed" className="nav-item">发布种子</Link>
+ {navLinks.map(({ to, label }) => (
+ <a
+ key={to}
+ href={to}
+ onClick={(e) => {
+ e.preventDefault(); // 防止默认跳转行为
+ handleLinkClick(to); // 手动更新当前路径
+ }}
+ className={`nav-item ${isActive(to) ? 'active' : ''}`}
+ >
+ {label}
+ </a>
+ ))}
</nav>
</div>
);