今天用react写了一个小小的DEMO：

精华来了：

闲来无事，用React的Router写了一个Demo

1. import React from "react";
   
2. import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
   
3. 
   
4. // 首页组件
   
5. function Home() {
   
6.   return <h2 style={{ margin: 0 }}>首页</h2>;
   
7. }
   
8. 
   
9. // 关于我们组件
   
10. function About() {
    
11.   return <h2 style={{ margin: 0 }}>关于我们</h2>;
    
12. }
    
13. 
    
14. // 主应用组件
    
15. function App() {
    
16.   return (
    
17.     <div
    
18.       style={{
    
19.         minHeight: "100vh",
    
20.         display: "flex",
    
21.         flexDirection: "column",
    
22.         alignItems: "center",
    
23.         justifyContent: "center",
    
24.         background: "#f5f7fa",
    
25.       }}
    
26.     >
    
27.       <Router>
    
28.         <nav
    
29.           style={{
    
30.             marginBottom: "2rem",
    
31.             background: "#fff",
    
32.             padding: "12px 32px",
    
33.             borderRadius: "12px",
    
34.             boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
    
35.             display: "flex",
    
36.             gap: "1.5rem",
    
37.             fontSize: "1.1rem",
    
38.             fontWeight: 500,
    
39.           }}
    
40.         >
    
41.           <Link to="/" style={{ textDecoration: "none", color: "#222" }}>
    
42.             首页
    
43.           </Link>
    
44.           <span style={{ color: "#ccc" }}>|</span>
    
45.           <Link to="/about" style={{ textDecoration: "none", color: "#222" }}>
    
46.             关于
    
47.           </Link>
    
48.         </nav>
    
49. 
    
50.         <div
    
51.           style={{
    
52.             background: "#fff",
    
53.             padding: "32px 48px",
    
54.             borderRadius: "16px",
    
55.             boxShadow: "0 4px 24px rgba(0,0,0,0.10)",
    
56.             minWidth: "260px",
    
57.             textAlign: "center",
    
58.           }}
    
59.         >
    
60.           <Routes>
    
61.             <Route path="/" element={<Home />} />
    
62.             <Route path="/about" element={<About />} />
    
63.           </Routes>
    
64.         </div>
    
65.       </Router>
    
66.     </div>
    
67.   );
    
68. }
    
69. 
    
70. export default App;
    

复制代码