fix: 添加 MemoryPage 路由组件
- 创建 MemoryPage 页面组件
- 在 App.js 中添加 /lobster/:id/memory 路由
- 修复 MemoryModal 导入路径
- 关闭弹窗时返回龙虾详情页
📖 日新模块现在可以正常访问了
This commit is contained in:
@@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import Dashboard from './pages/Dashboard';
|
import Dashboard from './pages/Dashboard';
|
||||||
import LobsterDetail from './components/LobsterDetail';
|
import LobsterDetail from './components/LobsterDetail';
|
||||||
|
import MemoryPage from './pages/MemoryPage';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@@ -9,6 +10,7 @@ function App() {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Dashboard />} />
|
<Route path="/" element={<Dashboard />} />
|
||||||
<Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
|
<Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
|
||||||
|
<Route path="/lobster/:lobsterId/memory" element={<MemoryPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|||||||
39
code/frontend/src/pages/MemoryPage/index.js
Normal file
39
code/frontend/src/pages/MemoryPage/index.js
Normal 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;
|
||||||
Reference in New Issue
Block a user