React Router 7 新功能与新模式报告

React Router 7 是 React 生态系统中用于页面导航的核心库，其最新版本带来了显著的更新，特别是在功能和使用方式上。最重要的变化是引入了三种使用模式：声明式（Declarative）、数据（Data）和框架（Framework）。这些模式让开发者可以根据项目需求选择合适的路由功能，从简单的页面跳转到构建全栈 React 应用程序。此外，React Router 7 还改进了类型安全性、性能优化，并增强了对 React 18 和 19 的支持。本报告将详细介绍这些新功能，特别是声明式、数据和框架模式的定义及使用方法，力求简洁易懂，避免晦涩术语。

React Router 7 的主要更新

React Router 7 的更新不仅限于修复和优化，还引入了全新的使用方式和功能。以下是主要更新内容：

• 三种使用模式：声明式、数据和框架模式，分别提供不同级别的功能和控制。
• 声明式数据处理：通过 loader 和 action 函数，路由可以直接处理数据获取和修改。
• 类型安全性提升：新的类型生成工具为路由参数、loader 数据和 action 提供了更好的类型支持。
• 性能优化：支持服务器端渲染（SSR）、代码分割、静态预渲染和流式渲染，提升加载速度和用户体验。
• React 兼容性：无缝支持 React 18 和 19 的新特性，简化升级路径。
• 包结构简化：统一使用 react-router 包，减少对 react-router-dom 的依赖。

这些更新使 React Router 7 成为一个多功能的工具，既可以作为简单的路由库，也可以作为构建复杂应用的框架。

声明式、数据和框架模式的详细说明

React Router 7 引入了三种模式，每种模式针对不同的开发需求，提供从基础到高级的功能。以下是对每种模式的详细解释，包括其用途和适用场景。

声明式模式（Declarative Mode）

定义：声明式模式是 React Router 的传统使用方式，专注于基本的路由功能。开发者通过 React 组件定义路由，页面导航完全在客户端进行。

特点：

• 使用 <BrowserRouter>、<Routes> 和 <Route> 组件在 React 组件树中定义路由。
• 支持页面跳转、URL 管理和动态路由。
• 不涉及复杂的数据加载或服务器端逻辑。

适用场景：

• 适合简单的单页应用（SPA），如个人博客或静态网站。
• 只需要页面切换而无需动态加载数据的项目。

使用方法：

• 在应用根组件中包裹 <BrowserRouter>。
• 使用 <Routes> 和 <Route> 定义页面路径和对应的组件。
• 通过 <Link> 或 useNavigate 实现页面跳转。

示例场景：一个电商网站的主页、产品页面和关于页面之间的切换，只需定义路由映射，无需额外数据处理。

数据模式（Data Mode）

定义：数据模式在声明式模式的基础上增加了数据获取和修改功能。路由配置从 React 组件树移到外部，通过 createBrowserRouter 定义，并支持 loader 和 action 函数。

特点：

• Loader 函数：在路由加载时自动获取数据，例如从 API 获取文章列表。
• Action 函数：处理数据修改，如表单提交或删除操作，完成后自动重新加载相关数据。
• 数据与路由紧密集成，简化了数据管理。
• 支持异步操作和错误处理。

适用场景：

• 需要动态加载数据的应用，如博客文章列表或用户仪表板。
• 涉及表单提交或数据更新的项目，如在线商店的购物车功能。

使用方法：

• 使用 createBrowserRouter 创建路由配置，指定路径、组件、loader 和 action。
• 使用 <RouterProvider> 渲染路由。
• 在组件中使用 useLoaderData 获取 loader 返回的数据，或通过 <Form> 触发 action。

示例场景：一个博客应用在访问文章页面时通过 loader 加载文章内容，用户提交评论时通过 action 保存评论并刷新页面。

框架模式（Framework Mode）

定义：框架模式将 React Router 转变为一个完整的开发框架，包含声明式和数据模式的所有功能，并添加了高级特性，如服务器端渲染、代码分割和静态预渲染。

特点：

• 集成 Vite 插件，提供类型安全的路由、热模块替换（HMR）和优化的构建过程。
• 支持文件式路由，路由结构基于文件系统，减少手动配置。
• 提供服务器端渲染（SSR）、静态站点生成（SSG）和代码分割，优化性能和 SEO。
• 与 React Suspense 深度集成，支持流畅的数据加载体验。

适用场景：

• 复杂的全栈应用，如企业级电商平台或内容管理系统。
• 需要搜索引擎优化（SEO）或快速首屏加载的项目。

使用方法：

• 使用 Vite 和 React Router 的插件初始化项目。
• 在 src/routes/ 目录中创建文件，自动生成路由（文件式路由）。
• 定义 loader 和 action 函数处理数据。
• 配置服务器端渲染或静态预渲染以优化性能。

示例场景：一个新闻网站使用框架模式，通过文件式路由定义文章和分类页面，服务器端渲染首屏内容以提高 SEO，代码分割减少加载时间。

模式对比与选择

以下表格总结了三种模式的特点和适用场景：

模式	功能范围	主要 API	适用项目类型	复杂度
声明式	基本路由、页面导航	<BrowserRouter>、<Route>、<Link>	简单 SPA，如个人网站	低
数据	路由 + 数据加载/修改	createBrowserRouter、loader、action	动态数据应用，如博客或仪表板	中
框架	全栈功能（SSR、代码分割等）	Vite 插件、文件式路由、SSR 配置	复杂全栈应用，如电商或 CMS	高

选择建议：

• 如果你的项目只需要页面跳转，选择声明式模式，简单易用。
• 如果需要加载动态数据或处理用户输入，选择数据模式，数据管理更高效。
• 如果要构建大型应用并需要性能优化或 SEO，选择框架模式，功能全面但配置稍复杂。

如何使用这些模式

以下是每种模式的基本使用步骤，适合初学者理解：

声明式模式

1. 安装 React Router：npm install react-router。
2. 在主组件中添加 <BrowserRouter>：

   import { BrowserRouter, Routes, Route } from "react-router";
   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </BrowserRouter>
     );
   }

3. 使用 <Link> 实现导航：

   import { Link } from "react-router";
   function Home() {
     return <Link to="/about">关于我们</Link>;
   }

数据模式

1. 安装 React Router：npm install react-router。
2. 创建路由并定义 loader 和 action：

   import { createBrowserRouter, RouterProvider } from "react-router";
   const router = createBrowserRouter([
     {
       path: "/posts",
       element: <Posts />,
       loader: async () => {
         const posts = await fetch("/api/posts").then(res => res.json());
         return { posts };
       },
       action: async ({ request }) => {
         const formData = await request.formData();
         await fetch("/api/posts", { method: "POST", body: formData });
         return { success: true };
       },
     },
   ]);
   function App() {
     return <RouterProvider router={router} />;
   }

3. 在组件中使用数据：

   import { useLoaderData, Form } from "react-router";
   function Posts() {
     const { posts } = useLoaderData();
     return (
       <div>
         {posts.map(post => <p>{post.title}</p>)}
         <Form method="post">
           <input name="title" />
           <button type="submit">添加文章</button>
         </Form>
       </div>
     );
   }

框架模式

1. 初始化 Vite 项目并安装 React Router 插件：

   npm create vite@latest my-app -- --template react
   npm install @react-router/dev react-router

2. 创建文件式路由，在 src/routes/ 中添加文件，如 index.tsx 和 products/[pid].tsx。
3. 定义 loader 和 action：

   // src/routes/products/[pid].tsx
   import { useLoaderData } from "react-router";
   export async function loader({ params }) {
     const product = await fetch(`/api/products/${params.pid}`).then(res => res.json());
     return { product };
   }
   export default function Product() {
     const { product } = useLoaderData();
     return <h1>{product.name}</h1>;
   }

4. 配置 Vite 和服务器端渲染（参考官方文档）。

其他重要更新

除了三种模式，React Router 7 还带来了以下改进：

• 类型安全性：通过新的类型生成工具，路由参数、loader 数据和 action 的类型定义更准确，减少开发中的错误。
• React 18/19 支持：支持 React Suspense、过渡 API 等新特性，提升用户体验。
• 性能优化：
  • 服务器端渲染：在服务器上预渲染页面，加快首屏加载并改善 SEO。
  • 代码分割：按需加载路由代码，减少初始加载时间。
  • 静态预渲染：在构建时生成静态页面，适合内容驱动的网站。
• API 调整：废弃了 json 和 defer 方法，推荐直接返回对象或使用 Response.json()，简化代码。
• 包结构简化：统一使用 react-router 包，减少依赖管理复杂性。

升级与兼容性

React Router 7 提供了从 v6 升级的平滑路径，尤其是启用了所有未来标志（future flags）的 v6 项目。官方文档提供了详细的升级指南，建议先升级到最新的 v6.x 版本，然后逐步启用 v7 的新功能。Remix v2 用户也可以升级到 React Router 7，享受改进的类型安全和路由功能。

总结

React Router 7 通过声明式、数据和框架三种模式，满足了从简单路由到全栈开发的各种需求。声明式模式适合快速构建简单的单页应用，数据模式简化了动态数据管理，框架模式则为复杂项目提供了强大的工具集。配合类型安全性和性能优化的改进，React Router 7 是 React 开发者构建现代应用的理想选择。

更多详细信息和代码示例，请访问 React Router 官方文档 或相关升级指南。

关键引用

• React Router Official Documentation
• Picking a Mode | React Router
• Data Loading | React Router
• Actions | React Router
• React Router v7 | Remix
• React Router 7: New Features Guide
• Custom Framework | React Router
• React Router Home | React Router