用react实现一个简单的三页应用

下面是一个使用 React Router 的简单示例，演示了如何在 React 应用中实现页面之间的导航。

---

🛠️ 第一步：使用 Vite 创建项目

npm create vite@latest my-router-app -- --template react
cd my-router-app
npm install

---

🚀 第二步：安装 React Router

npm install react-router-dom

---

📁 第三步：修改文件结构

创建目录结构如下：

my-router-app/
├─ src/
│  ├─ pages/
│  │  ├─ Home.jsx
│  │  ├─ About.jsx
│  │  └─ User.jsx
│  ├─ App.jsx
│  └─ main.jsx

---

✏️ 编辑文件内容如下

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App /></React.StrictMode>
);

---

src/App.jsx

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import User from './pages/User';export default function App() {return (<Router><nav style={{ marginBottom: 20 }}><Link to="/">首页</Link> | <Link to="/about">关于</Link> | <Link to="/user/42">用户42</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /></Routes></Router>);
}

---

src/pages/Home.jsx

export default function Home() {return <h2>欢迎来到首页！</h2>;
}

---

src/pages/About.jsx

export default function About() {return <h2>这是关于页面。</h2>;
}

---

src/pages/User.jsx

import { useParams } from 'react-router-dom';export default function User() {const { id } = useParams();return <h2>用户页面，ID: {id}</h2>;
}

---

🧪 第四步：运行项目

npm run dev

打开浏览器访问 http://localhost:5173，点击导航链接可以看到不同页面内容，URL 路径也会改变。

---