# WebF 路由设置 > **注意**：WebF 开发与 Web 开发几乎相同 - 您使用相同的工具（Vite、npm、Vitest）、相同的框架（React、Vue、Svelte）和相同的部署服务（Vercel、Netlify）。此技能涵盖 **3 个关键差异之一**：使用本机屏幕转换而不是 SPA 路由进行路由。另外两个区别是异步渲染和 API 兼容性。 **WebF 不使用传统的单页应用程序 (SPA) 路由。** 相反，它使用 **混合路由**，其中每个路由都呈现在具有平台本机转换的单独的本机 Flutter 屏幕上。 ## 根本区别 ### 在浏览器中（SPA 路由）传统的 Web 路由使用 History API 或基于哈希的路由： // 浏览器 SPA 路由 (react-router-dom, vue-router) // ❌ 此模式在 WebF 中不起作用从 'react-router-dom' 导入 { BrowserRouter, Routes, Route }; // 带客户端路由的单页 // 所有路由在同一个屏幕上渲染 // 过渡是基于 CSS 的整个应用程序在一个屏幕中运行，并且使用 JavaScript 和 CSS 模拟路线更改。 ### 在 WebF（混合路由）中每条路线都是一个带有原生转换的单独 Flutter 屏幕： // WebF混合路由 // ✅ 此模式适用于 WebF 从'@openwebf/react-router'导入{路由，路由，WebFRouter}； // 每个路由渲染在单独的 Flutter 屏幕上 // 转换使用本机平台动画 // 硬件后退按钮正常工作 **将其视为本机移动导航** \ - 每个路线都是导航堆栈中的一个新屏幕，而不是单个网页的一部分。 ## 为什么采用混合路由？ WebF 的方法提供了真正的本机应用程序行为： 1. **原生过渡** \- 特定于平台的动画（iOS 为 Cupertino，Android 为 Material） 2. **正确的生命周期** \- 每个路由都有自己的生命周期，类似于原生应用程序 3. **硬件后退按钮** \- Android后退按钮工作正常 4. **内存管理** \- 未使用的路由可以卸载 5. **深度链接** \- 与平台深度链接集成 6. **同步导航** \- Flutter Navigator 和 WebF 路由保持同步 ## 反应设置 ### 安装 npm 安装 @openwebf/react-router **关键**：不要使用 `react-router-dom` - 它在 WebF 中无法正常工作。 ### 基本路由配置从'@openwebf/react-router'导入{路由，路由}；从'./pages/home'导入{主页}；从'./pages/profile'导入{ProfilePage}；从'./pages/settings'导入{SettingsPage}；函数应用程序（）{ 返回（ <路线> {/* 每条路线必须有一个 title 属性 */} } title="Home" /> } title="个人资料" /> } title="设置" /> ）； } 导出默认应用程序； **重要**：`title` 属性出现在该屏幕的本机导航栏中。 ### 程序化导航使用“WebFRouter”对象进行导航：从'@openwebf/react-router'导入{WebFRouter}；函数主页() { // 向前导航（推送新屏幕） const goToProfile = () => { WebFRouter.pushState({ userId: 123 }, '/profile'); }; // 替换当前屏幕（无后退按钮） const ReplaceWithSettings = () => { WebFRouter.replaceState({}, '/settings'); }; // 导航回来 const goBack = () => { WebFRouter.back(); }; // 向前导航常量前进 = () => { WebFRouter.forward(); }; 返回（

主页

）； } ### 在路由之间传递数据使用state参数传递数据：从'@openwebf/react-router'导入{WebFRouter，useLocation}； // 发送者组件函数产品列表（）{ const viewProduct = (产品) => { // 将产品数据传递到详细信息屏幕 WebFRouter.pushState({ 产品 ID：产品 ID，产品名称：产品名称，产品价格：产品.价格 }, '/产品/详细信息'); }; 返回（

）； } // 接收器组件函数产品详细信息（）{ const 位置 = useLocation(); const { 产品 ID、产品名称、产品价格 } = location.state || {}；如果（！产品ID）{ return

无产品数据

; } 返回（

{产品名称}

价格：${productPrice}

ID：{productId}

）； } ### 使用路由参数 WebF支持动态路由参数：从'@openwebf/react-router'导入{路由，路由，useParams}；函数应用程序（）{ 返回（ <路线> } title="Home" /> } title="用户个人资料" /> } title="评论" /> ）； } 函数用户配置文件（）{ const { userId } = useParams(); 返回（

用户个人资料

用户 ID：{userId}

）； } 函数CommentDetail() { const { postId, commentId } = useParams(); 返回（

评论详情

帖子 ID：{postId}

评论 ID：{commentId}

）； } ### 带链接的声明式导航使用“WebFRouterLink”进行可点击导航：从'@openwebf/react-router'导入{WebFRouterLink}；函数导航菜单() { 返回（ <导航> <按钮>首页 <按钮>个人资料 console.log('链接可见')} > <按钮>设置）； } ### 高级导航方法 WebFRouter 为复杂场景提供了 Flutter 风格的导航：从'@openwebf/react-router'导入{WebFRouter}； // 推送路由（异步，推送屏幕时返回）等待WebFRouter.push('/details', { itemId: 42 }); // 替换当前路线（无后退按钮）等待 WebFRouter.replace('/login', { sessionExpired: true }); // 弹出和推送（删除当前的，添加新的） wait WebFRouter.popAndPushNamed('/success', { orderId: 'ORD-123' }); // 检查是否可以弹出如果 (WebFRouter.canPop()) { const didPop = WebFRouter.maybePop({ 取消: false }); console.log('是否弹出：', didPop); } // 可恢复导航（状态恢复支持） constrestorationId=awaitWebFRouter.restorablePopAndPushNamed('/checkout', { 购物车物品：物品，时间戳：Date.now() }); ## 钩子 API WebF 路由提供了用于访问路由信息的 React hooks：从 '@openwebf/react-router' 导入 { useLocation, useParams, useNavigate }; 函数 MyComponent() { // 获取当前位置（路径名、状态等） const 位置 = useLocation(); console.log('当前路径：', location.pathname); console.log('路线状态：', location.state); // 获取路由参数 const { userId, postId } = useParams(); // 获取导航函数常量导航 = useNavigate(); const handleClick = () => { // 以编程方式导航导航('/个人资料', { userId: 123 }); }; return ; } ## 常见模式 ### 模式 1：受保护的路由如果未通过身份验证，则重定向到登录：从'react'导入{useEffect}；从'@openwebf/react-router'导入{WebFRouter，useLocation}；函数 ProtectedRoute({ 儿童, isAuthenticated }) { const 位置 = useLocation(); 使用效果（（）=> { if (!isAuthenticated) { // 重定向到登录，保存当前路径 WebFRouter.pushState({ 重定向到：位置.路径名 }, '/登录'); } }, [isAuthenticated, 位置.路径名]); if (!isAuthenticated) { 返回空值； // 或者加载微调器 } 返回儿童； } // 用法函数应用程序（）{ const [isAuthenticated, setIsAuthenticated] = useState(false); 返回（ <路线> } title="登录" /> <路线路径=“/仪表板” 元素={ <仪表板页面/> } 标题=“仪表板” /> ）； } ### 模式 2：登录后重定向登录成功后，导航到保存的位置：函数登录页面（）{ const 位置 = useLocation(); const redirectTo = location.state?.redirectTo || '/'; const handleLogin = async () => { // 执行登录等待登录用户（）； // 重定向到保存的位置或主页 WebFRouter.replaceState({},redirectTo); }; 返回（ <按钮onClick={handleLogin}> 登录）； } ### 模式 3：条件导航根据结果导航：异步函数handleSubmit(formData) { 尝试{ const 结果 = 等待submitForm(formData); if (结果.成功) { // 跳转到成功页面 WebFRouter.pushState({ 消息：结果.消息， orderId: 结果.orderId }, '/成功'); } 否则{ // 跳转到错误页面 WebFRouter.pushState({ 错误：结果.错误 }, '/错误'); } } 捕获（错误）{ // 处理错误 WebFRouter.pushState({ 错误：错误消息 }, '/错误'); } } ### 模式 4：阻止导航在保留未保存的更改之前确认：从'react'导入{useEffect}；从'@openwebf/react-router'导入{WebFRouter}；函数 FormPage() { const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); 使用效果（（）=> { if (!hasUnsavedChanges) 返回； // 自定义后退按钮处理程序常量handleBack = () => { const shouldLeave = inform('您有未保存的更改。还是离开吗？'); 如果（应该离开）{ setHasUnsavedChanges(假); WebFRouter.back(); } }; // 注意：这是一个简化的示例 // 实际实现取决于您的后退按钮处理 }, [hasUnsavedChanges]); 返回（

setHasUnsavedChanges(true)}> {/* 表单字段 */} ）； } ## Vue 设置对于 Vue 应用程序，请使用“@openwebf/vue-router”： npm 安装@openwebf/vue-router **注意**：该 API 与 Vue Router 类似，但适用于 WebF 的混合路由。完整的 Vue 示例可在“examples.md”中找到。 ## 跨平台支持对于在 WebF 和浏览器中运行的应用程序，请参阅“cross-platform.md”以了解路由器适配器模式。 ## 与 SPA 路由的主要区别特色 | SPA 路由（浏览器）|混合路由 (WebF) ---|---|--- 屏幕转换 | CSS 动画 |原生平台动画路由生命周期 | JavaScript 管理 | Flutter 管理内存管理 |手册|自动（颤振导航器）返回按钮 |历史API |硬件后退按钮深度链接 |基于 URL |平台深度链接路线堆叠|虚拟|真正的原生屏幕堆栈 ## 常见错误 ### 错误1：使用react-router-dom // ❌ 错误 - 在 WebF 中无法正常工作从 'react-router-dom' 导入 { BrowserRouter, Routes, Route }; 函数应用程序（）{ 返回（ <浏览器路由器> <路线> <路线路径=“/”元素={<主页/>} /> ）； } // ✅ 正确 - 使用 @openwebf/react-router 从'@openwebf/react-router'导入{路由，路由}；函数应用程序（）{ 返回（ <路线> } title="Home" /> ）； } ### 错误 2：忘记 title Prop // ❌ 错误 - 缺少标题属性 <路线路径=“/”元素={<主页/>} /> // ✅ 正确 - 包括标题 } title="Home" /> ### 错误 3：使用 window.history // ❌ 错误 - History API 在 WebF 中不起作用 window.history.pushState({}, '', '/new-path'); // ✅ 正确 - 使用 WebFRouter WebFRouter.pushState({}, '/new-path'); ### 错误 4：预期 SPA 行为 // ❌ 错误 - 期望所有路由共享状态 // 在WebF中，每个路由都是一个单独的屏幕 const [sharedState, setSharedState] = useState({}); // 不会跨路线持续存在 // ✅ 正确 - 使用正确的状态管理 // 使用Context、Redux或者通过路由状态传递数据 WebFRouter.pushState({ data: myData }, '/next-route'); ＃＃资源 * **路由文档**： * **核心概念 - 混合路由** : * **完整示例** ：请参阅本技能中的“examples.md” * **跨平台模式** ：请参阅本技能中的“cross-platform.md” * **npm 包** : ## 快速参考 # 安装 React 路由器 npm 安装 @openwebf/react-router # 安装 Vue 路由器 npm 安装@openwebf/vue-router // 基本设置从'@openwebf/react-router'导入{路由，路由，WebFRouter}； // 向前导航 WebFRouter.pushState({ data }, '/path'); // 导航回来 WebFRouter.back(); // 替换当前的 WebFRouter.replaceState({ data }, '/path'); // 获取位置 const 位置 = useLocation(); // 获取参数 const { id } = useParams(); ## 要点 ✅ **做**： * 使用`@openwebf/react-router`或`@openwebf/vue-router` * 在所有路线上包含 `title` 属性 * 使用`WebFRouter`进行导航 * 通过路由状态传递数据 * 将路线视为本机屏幕 ❌ **不要**： * 直接使用react-router-dom或vue-router * 预期 SPA 路由行为 * 使用window.history API * 在没有适当状态管理的情况下跨路由共享状态 * 忘记每条路线都是一个单独的 Flutter 屏幕

Webf 路由设置

包含技能