React Router 框架模式应用如何做到渐进式增强在禁用 JavaScript 时仍可访问【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router这篇文章解决一个具体任务用 React Router 的框架模式framework mode搭建应用使得页面内容和基础交互导航、表单提交在浏览器禁用 JavaScript 时依然可用而 JavaScript 加载后自动升级为客户端路由体验。前提是项目运行在框架模式下服务端渲染是默认开启的——这正是渐进式增强成立的机制。完成后的结果禁用 JavaScript 时用户看到的是服务端渲染的 HTMLLink表现为普通的a href表单由浏览器原生提交JavaScript 加载后React Router 接管点击和表单提交换成客户端路由与 pending UI。从模板开始确认服务端渲染处于默认状态按 安装文档 创建项目并启动开发服务器npx create-react-routerlatest my-react-router-app cd my-react-router-app npm i npm run dev启动后打开http://localhost:5173即可看到应用。渐进式增强依赖服务端渲染。渲染策略文档说明框架模式有三种渲染策略Client Side Rendering、Server Side Rendering、Static Pre-rendering其中服务端渲染是框架模式默认行为。只有在react-router.config.ts里显式设置ssr: false时才会关闭运行时服务端渲染即 SPA 模式import type { Config } from react-router/dev/config; export default { ssr: true, } satisfies Config;如果你的目标是禁用 JavaScript 仍可访问就不要设置ssr: false并保持默认的服务端渲染。注意服务端渲染需要部署环境支持这一点渲染策略文档对此有明确说明。渐进式增强的原理在 Progressive Enhancement 说明文档中典型 SPA 发送一份空白 HTML等 JavaScript 加载完才开始工作而框架模式的请求一到服务器就启动工作并流式输出响应浏览器可以并行下载 HTML、JavaScript 和数据。这意味着在 JavaScript 加载完成之前所有人的浏览器其实都处在无 JavaScript 状态——所以应用必须在这个阶段就能用。用渐进式增强的组件Link 与 Form应用里真正禁用 JavaScript 也能用的部分来自 React Router 提供的两个渐进式增强组件。Link渲染为带 href 的普通链接Link API 文档将其定义为progressively enhanceda hrefwrapper。用法import { Link } from react-router; Link to/dashboardDashboard/Link渐进式增强文档说明了它的双形态行为Link to/account渲染为a href/account这个标签在没有 JavaScript 时也能正常跳转当 JavaScript 加载后React Router 会拦截点击并改用客户端路由处理导航避免整页刷新文档的原话是而不是在浏览器标签页里转 favicon。Form浏览器先接管React Router 后接管Form API 文档将Form定义为progressively enhanced HTMLform关键机制是因为基于 HTML 表单 API服务端渲染的页面在 JavaScript 加载前就具备基础交互能力——此时由浏览器本身管理提交和 pending 状态比如标签页里的转圈 faviconJavaScript 加载后 React Router 才接管启用应用级体验。一个典型的渐进式增强提交按钮来自 渐进式增强文档export function AddToCart({ id }) { return ( Form methodpost action/add-to-cart input typehidden nameid value{id} / button typesubmitAdd To Cart/button /Form ); }文档给出的判断标准很直接Whether JavaScript has loaded or not doesnt matter, this button will add the product to the cart.JavaScript 是否加载都不影响这个按钮都能把商品加入购物车。提交走的是 Actions 机制表单以post方法引用路由路径调用 actionaction 完成后页面上所有 loader 数据会自动重新验证无需额外代码。方法限制Form API 文档的method一节指出原生form只支持get和post如果你希望保留渐进式增强支持就避免使用其他动词delete、patch、put。可选完全去掉脚本标签如果某个部署目标是让页面彻底以传统网页方式运行Scripts API 文档说明服务端渲染场景下可以省略根组件中的Scripts /应用将退化为仅依赖 HTML 和浏览器行为的传统网页。默认写法是保留它让 JavaScript 加载后接管import { Scripts } from react-router; export default function Root() { return ( html head / body Scripts / /body /html ); }验证禁用 JavaScript 后检查基础体验启动开发服务器npm run dev打开http://localhost:5173然后在浏览器设置中禁用 JavaScript 刷新页面按文档描述的行为逐项核对页面内容可见服务端渲染保证了首屏 HTML 不是空壳内容与功能可以直接访问——这是 渐进式增强文档对框架模式默认服务端渲染的定位。链接可点击跳转Link输出的是a href在a href层面检查查看源代码即可确认渲染结果应看到完整的href属性。表单可提交POST 表单由浏览器原生处理提交成功走浏览器自带的 pending 提示action 完成后数据重新验证UI 与数据保持同步见 Form 文档。JavaScript 加载后再访问同一应用链接点击应走客户端路由无整页刷新表单提交由 React Router 拦截并展示应用内的 pending UI——两阶段行为都符合文档描述即验证通过。JavaScript 加载后的增强迭代可选渐进式增强的开发方式是按迭代构建而不是为有 JS 和无 JS 分别写两套。渐进式增强文档给出的两个增强示例都不改变基础设计用useFetcher增强提交按钮——不触发导航用户停留在当前页面继续购物import { useFetcher } from react-router; export function AddToCart({ id }) { const fetcher useFetcher(); return ( fetcher.Form methodpost action/add-to-cart input nameid value{id} / button typesubmit {fetcher.state submitting ? Adding... : Add To Cart} /button /fetcher.Form ); }文档说明JavaScript 加载中时这个功能和之前完全一样JavaScript 加载后useFetcher不再像Form那样触发导航pending UI 由应用代码决定。用useNavigation增强搜索框——URL 本身就是 UI 的 source of truth无需客户端状态管理import { useNavigation } from react-router; export function SearchBox() { const navigation useNavigation(); const isSearching navigation.location.pathname /search; return ( Form methodget action/search input typesearch namequery / {isSearching ? Spinner / : SearchIcon /} /Form ); }边界与限制客户端专属能力不受增强覆盖clientLoader和clientAction只在浏览器中运行见 Actions 文档这部分数据与交互在禁用 JavaScript 时不可用同理useFetcher、useNavigation提供的 pending UI 只在 JavaScript 加载后才生效。部署环境服务端渲染需要支持它的部署方式否则应参考 预渲染文档 的思路用构建期生成的静态 HTML 兜底SPA 指南也提到 SPA 模式是Pre-Rendering的特殊形式。不要把ssr设为false这会在运行时禁用服务端渲染进入 SPA 模式本文的禁用 JavaScript 仍可访问路径不再成立。【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考