React Router

React Router 简介

React Router 是 React 生态中最流行的路由库，提供声明式路由能力，帮助开发者构建单页应用（SPA）和全栈 Web 应用。它支持多种使用模式，从轻量级库到完整框架，满足不同项目需求。

核心特性

• 声明式路由：通过组件声明路由结构，与 React 组件化思想一致。
• 多模式支持：
  • 声明式模式：最基础的路由配置，适合简单 SPA。
  • 数据模式：支持数据加载、动作和错误边界，适合复杂应用。
  • 框架模式：提供全栈能力，包括服务端渲染、文件系统路由等。
• 嵌套路由：支持布局嵌套，轻松管理复杂页面结构。
• TypeScript 支持：完整的类型定义，提升开发体验。

快速上手

安装核心包：

npm install react-router

一个简单的声明式路由示例：

import { BrowserRouter, Routes, Route } from "react-router";

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

适用场景

• 需要路由管理的 React 单页应用
• 希望使用全栈框架快速搭建 SSR 应用
• 已有架构中需要轻量路由库

注意事项

React Router 版本迭代较快，升级时请参考官方迁移指南。框架模式引入了较多约定，建议先熟悉基础概念再深入使用。