🚀React Router 嵌套路由示例详解

嵌套路由是React Router中实现页面层级结构的核心特性，常用于博客系统、电商分类页等场景。以下是典型实现方式：

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import About from './About';
import Contact from './Contact';

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

📌关键特性说明：

  1. Layout组件包裹所有路由，实现全局布局
  2. 子路由通过path属性嵌套定义（如/about/team）
  3. 使用Outlet组件渲染子路由内容
  4. 动态路由参数通过:定义（如/user/:id）

💡使用建议：

  • 配合useParams获取动态参数
  • 使用useNavigate实现编程式导航
  • 通过useLocation获取当前路径信息

📚扩展阅读：
React Router官方文档 提供了更详细的嵌套路由配置指南，包含完整示例和最佳实践。
嵌套路由实现原理 可帮助理解底层工作机制。

React_Router_Nested_Routes_Example