fix: 添加 MemoryPage 路由组件

- 创建 MemoryPage 页面组件
- 在 App.js 中添加 /lobster/:id/memory 路由
- 修复 MemoryModal 导入路径
- 关闭弹窗时返回龙虾详情页

📖 日新模块现在可以正常访问了
This commit is contained in:
2026-04-02 13:33:17 +08:00
parent 6a2a5bc469
commit 4b4cd73a77
2 changed files with 41 additions and 0 deletions

View File

@@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import LobsterDetail from './components/LobsterDetail';
import MemoryPage from './pages/MemoryPage';
function App() {
return (
@@ -9,6 +10,7 @@ function App() {
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
<Route path="/lobster/:lobsterId/memory" element={<MemoryPage />} />
</Routes>
</Router>
);

View File

@@ -0,0 +1,39 @@
import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import MemoryModal from '../../components/MemoryModal/index.js';
function MemoryPage() {
const { lobsterId } = useParams();
const navigate = useNavigate();
const [lobster, setLobster] = useState(null);
// 龙虾数据(应该从 API 获取,这里简化处理)
const lobsters = {
1: { name: '飞行侠', emoji: '🦸' },
2: { name: '道童', emoji: '☯️' },
3: { name: '墨子', emoji: '🔧' },
4: { name: '织网者', emoji: '🕸️' },
5: { name: '费曼', emoji: '⚛️' },
6: { name: '守望者', emoji: '👁️' },
};
const lobsterData = lobsters[lobsterId];
const handleClose = () => {
navigate(`/lobster/${lobsterId}`);
};
if (!lobsterData) {
return <div>龙虾不存在</div>;
}
return (
<MemoryModal
lobsterId={lobsterId}
lobsterName={`${lobsterData.emoji} ${lobsterData.name}`}
onClose={handleClose}
/>
);
}
export default MemoryPage;