📚 React Router 基础教程

🚀 什么是 React Router？

React Router 是 React 生态中用于构建单页应用（SPA）的主流路由库，它允许你根据 URL 动态渲染组件。

• 📌 核心功能：动态路由匹配、嵌套路由、导航跳转
• 📌 支持版本：v6（推荐）和 v5（兼容旧项目）
• 📌 适用场景：SPA、多页面应用、权限路由管理

🛠 安装与初始化

1. 安装命令

   npm install react-router-dom
   

2. 基础结构
   • 使用 BrowserRouter 包裹整个应用
   • 通过 Route 定义路由规则
   • 用 Switch 匹配唯一路由

🧱 路由配置示例

import { BrowserRouter, Route, Routes } from 'react-router-dom';  
import Home from './Home';  
import About from './About';  

function App() {  
  return (  
    <BrowserRouter>  
      <Routes>  
        <Route path="/" element={<Home />} />  
        <Route path="/about" element={<About />} />  
      </Routes>  
    </BrowserRouter>  
  );  
}

📌 注意：v6 版本中 Switch 被 Routes 替代，且 exact 属性不再需要

🔄 动态路由与嵌套

• 动态路由：使用 :param 匹配可变路径

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

• 嵌套路由：通过 Outlet 实现子路由渲染

  <Route path="/dashboard" element={<Dashboard />}>  
    <Route path="profile" element={<Profile />} />  
  </Route>
  

📁 扩展阅读

如果你对 React Router 的高级用法感兴趣，可以参考我们的 React Router V6 官方文档 获取更详细的信息。

📌 提示：结合 react-router-dom 的 useParams 和 useNavigate 可实现更灵活的导航控制！