HarmonyOS鸿蒙Next中使用hmrouter跳转动态路由页面失败，出现白屏

HarmonyOS鸿蒙Next中使用hmrouter跳转动态路由页面失败，出现白屏

import { HMLifecycleState, HMPopInfo, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { PageOneBuilder } from './PageOne';

@HMRouter({ pageUrl: 'MainPage', lifecycle: 'ExitAppLifecycle' })
@Component
export default struct MainPage {
  aboutToAppear(): void {
    // 动态注册页面
    const success = HMRouterMgr.registerPageBuilder({
      builder: wrapBuilder(PageOneBuilder),
      pageUrl: 'DynamicPage',
      singleton: true
    });
    console.log('注册结果:', success);
  }

  build() {
    NavDestination() {
      Column() {
        Text("第一个页面").margin(10)
        Button("跳转PageA").onClick(() => {
          HMRouterMgr.push({
            pageUrl: "PageA"
          })

        }).margin(20)
        Button("跳转PageB").onClick(() => {

          HMRouterMgr.push({
            pageUrl: "PageB"
          })

        }).margin(20)

        Button("DynamicPage").onClick(() => {

          HMRouterMgr.push({
            pageUrl: "DynamicPage"
          })

        }).margin(20)
      }
    }

  }
}

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}


@Component
export struct PageOne {
  build() {
    NavDestination() {
      Column() {
        Button('动态路由页面', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)

      }.width('100%').height('100%')
    }.title('动态路由页面')
  }
}

更多关于HarmonyOS鸿蒙Next中使用hmrouter跳转动态路由页面失败，出现白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，hmrouter跳转动态路由页面白屏通常由以下原因导致：

  1. 动态路由未正确注册，检查目标页面的路由配置路径是否完整匹配。
  2. 页面组件未正确定义或导出，确认@CustomDialog或@Entry装饰器使用规范。
  3. 资源加载异常，动态路由依赖的模块未同步加载完成。
  4. 生命周期回调错误，如aboutToAppear中存在阻塞操作。

排查步骤：检查路由表配置路径；确认目标页面组件状态；使用DevEco Studio调试工具查看日志输出。

更多关于HarmonyOS鸿蒙Next中使用hmrouter跳转动态路由页面失败，出现白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，动态路由页面跳转失败并出现白屏通常由以下原因导致：

  1. 页面注册时机问题：动态注册应在应用启动时完成，而非在页面生命周期中。建议将HMRouterMgr.registerPageBuilder移至EntryAbility的onCreate方法中执行，确保路由在页面跳转前已完成注册。

  2. 页面构建器函数参数不匹配：PageOneBuilder需严格遵循(name: string, param: Object) => void签名。当前实现未使用参数，但需确保传入参数不影响构建逻辑，可调整为：

    [@Builder](/user/Builder)
export function PageOneBuilder(name: string, param: Object) {
  PageOne({ pageName: name, params: param }) // 通过构造函数传递参数
}

  3. 组件未正确定义：动态页面的组件需通过@Component装饰器明确定义，且需包含必要的生命周期（如aboutToAppear）。检查PageOne是否完整实现组件结构。

  4. 路由配置一致性：跳转时使用的pageUrl（如"DynamicPage"）必须与注册时的pageUrl完全一致，包括大小写。

  5. NavDestination嵌套问题：确保动态页面作为NavDestination的根组件，且父容器未遮挡内容。可尝试简化布局结构进行验证。

建议检查控制台日志输出，确认注册结果（success状态）及跳转时的错误信息，以进一步定位问题。

回到顶部