React Router
React Router 是 React 生态中最流行的路由解决方案，现已演进为全栈框架。React Router 7 基于 Vite 构建，提供了现代化的开发体验，支持服务端渲染、静态生成等多种渲染模式，让您能够构建高性能的全栈 Web 应用。
注意：
目前 Pages 对 React Router 版本的支持为 7+，支持全栈部署。
核心特点
全栈框架：从单纯的路由库升级为全栈框架，支持前后端一体化开发。
多渲染模式：支持 SSR（服务端渲染）、SSG（静态生成）、SPA（单页应用）等多种渲染模式，灵活适配不同场景。
嵌套路由：强大的嵌套路由系统，支持布局嵌套和并行数据加载。
数据加载：内置数据加载机制（loader）和数据变更（action），简化数据获取和表单处理。
类型安全路由：原生 TypeScript 支持，提供完整的类型推断和路由类型安全。
文件式路由：支持基于文件系统的路由约定，简化路由配置。
快速开始
在 EdgeOne Pages 上开始部署 React Router 的项目：
通过 Git 仓库导入 React Router 的项目
从 Pages 的模板库选择 React Router 的模板
使用 @edgeone/react-router 框架适配器部署本地项目
了解 React Router 在 Pages 的部署表现，可以点击下方的示例模版：
Pages 对 React Router 的支持
下表是 Pages 目前支持 React Router 的关键特性。平台也会尽早支持更多特性，但实验性功能可能尚未完全稳定。
React Router 特性 | 支持情况 |
Server-Side Rendering (SSR) | ✅ |
Static Site Generation (SSG) | ✅ |
Single Page Application (SPA) | ✅ |
Route Loaders | ✅ |
Route Actions | ✅ |
Nested Routes | ✅ |
File-based Routing | ✅ |
Streaming | ✅ |
Experimental features | 部分支持 |
在 Pages 部署 React Router 项目
@edgeone/react-router 是一个将 React Router v7 应用自动适配到 Pages 平台的 Vite 插件，可以配合 Pages 的脚手架工具将本地的 React Router
项目打包部署到 Pages 平台。@edgeone/react-router 的主要功能如下：
自动适配：将 React Router v7 应用转换为 Pages 平台可执行的格式
多模式支持：支持 SSR、SPA、预渲染等多种渲染模式
资源优化：自动处理和打包静态资源
要在 Pages 部署 React Router 项目，可以参考以下步骤操作。
1. 安装 EdgeOne CLI
注意：
@edgeone/react-router 要求脚手架版本 ≥ 1.2.0。部署前请先检查版本，避免部署失败。
2. 安装适配器
npm install @edgeone/react-router
3. 配置 Vite
在 vite.config.ts 中引入并使用 edgeoneAdapter ：
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { edgeoneAdapter } from "@edgeone/react-router";export default defineConfig({plugins: [reactRouter(),edgeoneAdapter() // add EdgeOne adapter],});
4. 构建项目
使用 Pages 脚手架的 deploy 命令可自动完成构建并部署到 Pages 平台。
edgeone pages deploy
服务端渲染 (SSR)
服务端渲染允许您在服务器上动态渲染页面。每次用户发起请求时，服务器动态获取数据并生成 HTML，提供更好的 SEO 和首屏加载体验。
在 React Router 中，可以通过 loader 函数在服务端获取数据：
// routes/post.tsximport type { Route } from "./+types/post";export async function loader({ params }: Route.LoaderArgs) {const post = await fetchPost(params.id);return { post };}export default function Post({ loaderData }: Route.ComponentProps) {return (<article><h1>{loaderData.post.title}</h1><div>{loaderData.post.content}</div></article>);}
默认构建设置如下：
构建命令:
npm run build输出目录:
build
静态站点生成（SSG）
React Router 支持在构建时预渲染静态页面。通过配置
prerender 选项，可以将指定路由生成为静态 HTML。
在
react-router.config.ts 中配置：import type { Config } from "@react-router/dev/config";export default {async prerender() {return ["/","/about","/blog/post-1","/blog/post-2",];},} satisfies Config;
也可以动态生成预渲染路由：
export default {async prerender() {const posts = await fetchAllPosts();return ["/",...posts.map(post => `/blog/${post.slug}`)];},} satisfies Config;
默认构建设置如下：
构建命令:
npm run build输出目录:
build/client
单页应用 (SPA) 模式
如果不需要服务端功能，可以将 React Router 配置为纯 SPA 模式。在
react-router.config.ts 中设置：import type { Config } from "@react-router/dev/config";export default {ssr: false,} satisfies Config;
默认构建设置如下：
构建命令:
npm run build输出目录:
build/client
流式渲染
React Router 支持通过 React 18 的 Suspense 实现流式渲染。页面内容可以从服务器逐步传输到客户端，无需等待所有数据加载完成。
import { Suspense } from "react";import { Await } from "react-router";export async function loader() {// 返回 Promise 而不等待const postsPromise = fetchPosts();const weatherPromise = fetchWeather();return {posts: postsPromise,weather: weatherPromise,};}export default function Dashboard({ loaderData }) {return (<div><Suspense fallback={<p>加载帖子中...</p>}><Await resolve={loaderData.posts}>{(posts) => <PostList posts={posts} />}</Await></Suspense><Suspense fallback={<p>加载天气中...</p>}><Await resolve={loaderData.weather}>{(weather) => <Weather data={weather} />}</Await></Suspense></div>);}
更多资源