App.jsx
3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// 导入已存在的页面组件
import Home from './pages/Home';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';
import Cart from './pages/Cart';
import Checkout from './pages/Checkout';
import Login from './pages/Login';
import Register from './pages/Register';
import UserProfile from './pages/UserProfile';
import OrderHistory from './pages/OrderHistory';
import OrderDetail from './pages/OrderDetail';
import NotFound from './pages/NotFound';
// 导入水果页面
import KiwiPage from './pages/fruits/KiwiPage';
import ApplePage from './pages/fruits/ApplePage';
import GrapePage from './pages/fruits/GrapePage';
import StrawberryPage from './pages/fruits/StrawberryPage';
import OrangePage from './pages/fruits/OrangePage';
import WatermelonPage from './pages/fruits/WatermelonPage';
import PomegranatePage from './pages/fruits/PomegranatePage';
import RedDatePage from './pages/fruits/RedDatePage';
// 导入蔬菜页面
import TomatoPage from './pages/vegetables/TomatoPage';
// 导入已存在的通用组件
import Header from './components/common/Header';
import Footer from './components/common/Footer';
function App() {
return (
<Router>
<div className="App">
{/* 头部导航 - 使用已存在的 Header 组件 */}
<Header />
{/* 主要内容区域 */}
<main style={mainStyle}>
<Routes>
{/* 首页路由 */}
<Route path="/" element={<Home />} />
{/* 产品相关路由 */}
<Route path="/products" element={<ProductList />} />
<Route path="/products/:id" element={<ProductDetail />} />
<Route path="/cart" element={<Cart />} />
<Route path="/checkout" element={<Checkout />} />
{/* 用户相关路由 */}
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/profile" element={<UserProfile />} />
<Route path="/orders" element={<OrderHistory />} />
<Route path="/orders/:id" element={<OrderDetail />} />
{/* 水果详情页路由 */}
<Route path="/fruit/kiwi" element={<KiwiPage />} />
<Route path="/fruit/apple" element={<ApplePage />} />
<Route path="/fruit/grape" element={<GrapePage />} />
<Route path="/fruit/strawberry" element={<StrawberryPage />} />
<Route path="/fruit/orange" element={<OrangePage />} />
<Route path="/fruit/watermelon" element={<WatermelonPage />} />
<Route path="/fruit/pomegranate" element={<PomegranatePage />} />
<Route path="/fruit/red-date" element={<RedDatePage />} />
{/* 蔬菜详情页路由 */}
<Route path="/vegetable/tomato" element={<TomatoPage />} />
{/* 404 页面 */}
<Route path="*" element={<NotFound />} />
</Routes>
</main>
{/* 底部信息 - 使用已存在的 Footer 组件 */}
<Footer />
</div>
</Router>
);
}
// 样式定义
const mainStyle = {
minHeight: 'calc(100vh - 160px)',
backgroundColor: '#f8f9fa'
};
export default App;