用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 路径也会改变。


相关推荐
幻雨様几秒前
UE5多人MOBA+GAS 番外篇:同时造成多种类型伤害,以各种属性值的百分比来应用伤害(版本二)
java·前端·ue5
讨厌吃蛋黄酥5 分钟前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc78727 分钟前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
Hello.Reader1 小时前
Rust → WebAssembly 的性能剖析全指南
前端·rust·wasm
前端小巷子1 小时前
Vue 2 Diff 算法
前端·vue.js·面试
奕辰杰5 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny7 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
_Kayo_7 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
路光.8 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks