🚀 React Router 教程：构建多页面 React 应用 📚

📌 什么是 React Router？

React Router 是 React 生态中用于实现前端路由的主流库，它能让你通过 URL 地址管理应用的不同视图。
例如：

• /home 显示首页
• /about 显示关于页面
• /posts/:id 动态加载文章详情

🛠️ 快速入门步骤

1. 安装依赖

   npm install react-router-dom
   

2. 基础路由配置

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   <Router>
     <Switch>
       <Route path="/home" component={Home} />
       <Route path="/about" component={About} />
       <Route path="*" component={NotFound} />
     </Switch>
   </Router>
   

3. 嵌套路由实现
   在 App.js 中定义父级路由，通过 children 属性嵌套子级路由。

   

🔐 动态路由与参数传递

使用 :param 语法捕获动态段：

<Route path="/user/:id" component={UserProfile} />

通过 useParams 获取参数：

const { id } = useParams();

🧭 编程式导航技巧

使用 useNavigate 实现跳转：

const navigate = useNavigate();
navigate('/dashboard');

📚 推荐阅读

想要深入了解 React Router 的高级用法？欢迎阅读 React Router 官方文档 或 React 项目搭建指南。