边缘安全加速平台 EO React Router

注意：目前 Makers 对 React Router 版本的支持为 7+，支持全栈部署。

一、核心特点

·全栈框架：从单纯的路由库升级为全栈框架，支持前后端一体化开发。

·多渲染模式：支持 SSR（服务端渲染）、SSG（静态生成）、SPA（单页应用）等多种渲染模式，灵活适配不同场景。

·嵌套路由：强大的嵌套路由系统，支持布局嵌套和并行数据加载。

·数据加载：内置数据加载机制（loader）和数据变更（action），简化数据获取和表单处理。

·类型安全路由：原生 TypeScript 支持，提供完整的类型推断和路由类型安全。

·文件式路由：支持基于文件系统的路由约定，简化路由配置。

二、快速开始

在 EdgeOne Makers 上开始部署 React Router 的项目：

·通过 Git 仓库导入 React Router 的项目。

·从 Makers 的模板库选择 React Router 的模板。

·使用 @edgeone/react-router 框架适配器部署本地项目。

了解 React Router 在 Makers 的部署表现，可以点击下方的示例模板：

三、Makers 对 React Router 的支持

下表是 Makers 目前支持 React Router 的关键特性。平台也会尽早支持更多特性，但实验性功能可能尚未完全稳定。

四、在 Makers 部署 React Router 项目

@edgeone/react-router 是一个将 React Router v7 应用自动适配到 Makers 平台的 Vite 插件，可以配合 Makers 的脚手架工具将本地的 React Router

项目打包部署到 Makers 平台。适配器源代码已开源，欢迎访问 vite-adapter仓库查看源码、提交 Issue 或参与贡献。@edgeone/react-router 的主要功能如下：

·自动适配：将 React Router v7 应用转换为 Makers 平台可执行的格式。

·多模式支持：支持 SSR、SPA、预渲染等多种渲染模式。

·资源优化：自动处理和打包静态资源。

要在 Makers 部署 React Router 项目，可以参考以下步骤操作。

五、1. 安装适配器

npm install @edgeone/react-router

六、2. 配置 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 ],});

七、3. 部署项目

Git 连接部署

集成好适配器后，你可以将项目提交到 GitHub，GitLab 等平台，然后使用我们的 导入 Git 仓库。

CLI 部署

也可以安装 Makers 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用 `edgeone makers deploy` 命令部署项目。在部署过程中，CLI 会先自动构建项目，然后将构建产物上传并发布。

注意：EdgeOne CLI 版本要求 ≥ 1.2.0，部署前请先检查版本，避免部署失败。

八、服务端渲染 (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> );}

十二、更多资源

·React Router 产品文档

·vite-adapter 代码仓库