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

ZHOU_WUYI2025-05-10 13:51

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

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

bash 复制代码

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

🚀 第二步：安装 React Router

bash 复制代码

npm install react-router-dom

📁 第三步：修改文件结构

创建目录结构如下：

复制代码

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

✏️ 编辑文件内容如下

`src/main.jsx`

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`

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`

jsx 复制代码

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

`src/pages/About.jsx`

jsx 复制代码

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

`src/pages/User.jsx`

jsx 复制代码

import { useParams } from 'react-router-dom';

export default function User() {
  const { id } = useParams();
  return <h2>用户页面，ID: {id}</h2>;
}

🧪 第四步：运行项目

bash 复制代码

npm run dev

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