React Router 基础用法 🚀

React Router 是 React 生态中用于构建单页应用（SPA）的主流路由库，能实现页面间的导航与动态加载。以下是关键知识点：

1. 核心概念 📌

• 路由（Route）：定义路径与组件的映射关系
  示例：<Route path="/home" component={Home} />
• 嵌套路由（Nested Routes）：通过 Route 嵌套实现层级路径
  示例：/user/123/profile
• 动态路由（Dynamic Routes）：使用 :param 匹配可变参数
  示例：<Route path="/user/:id" component={User} />
• 路由守卫（Route Guards）：通过 component 或 render 控制访问权限

2. 快速上手步骤 📝

1. 安装依赖

   npm install react-router-dom
   

2. 包裹 BrowserRouter

   <BrowserRouter>
     <Routes>
       {/* 路由配置 */}
     </Routes>
   </BrowserRouter>
   

3. 使用 useNavigate 或 useParams

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

3. 示例代码 📁

// App.js
import { BrowserRouter, Routes, Route } 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>
  );
}

4. 常见问题 ❓

• 路由不生效？检查是否使用 exact 属性或 path 匹配规则
• 404 页面？通过 Route 的 errorElement 捕获异常
• 嵌套路由无法访问？确保子路由 path 以 / 开头

想了解更多高级用法，请访问 /react_tutorial/react_router_advanced_usage。