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

下面是一个使用 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 路径也会改变。


相关推荐
yzzzzzzzzzzzzzzzzz4 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
奋斗的小羊羊4 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿4 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡4 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友5 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光6 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_6 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~6 小时前
CSS @media 媒体查询
前端·css·媒体
shix .7 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug7 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome