Remax中使用Page组件时小程序正常但Web端显示空白页面怎么办？

设计师卜楷提问于 2026-02-06 21:49:29 阅读 144

移动

我在用Remax开发多端应用时遇到奇怪问题，同样的Page组件在小程序端能正常渲染内容，但Web端只显示空白页面。检查过网络请求都没问题，控制台也没有报错。

尝试把页面代码简化到只剩最基础的结构还是不行，这是我的组件代码：

import { Page, View } from 'remax/ali';

export default () => (
  <Page>
    <View>测试页面</View>
  </Page>
);

但换成React原生的div包裹就能正常显示，这说明是Page组件的问题。有没有可能是环境配置或适配器设置不对？

我来解答赞 8 收藏

反馈

2 条解答

诸葛景景 Lv1

Remax 的 Page 组件是平台特有组件，只在小程序环境有意义，Web 端没有对应的页面容器概念，所以直接用 remax/ali 导出的 Page 在 Web 端会渲染为空。

按照规范，多端项目里不应该直接使用 remax/ali 或其他平台专用入口，而应该使用 remax/runtime 提供的适配方案，或者通过环境判断来动态渲染。

最简单的解决方式是换成通用容器，比如 View 或者自定义一个跨端的页面壳：

import { View } from 'remax';

import { usePlatform } from 'remax';



export default () => {

  const { platform } = usePlatform();

  // Web 端不需要 Page 包裹，Page 是小程序页面容器

  const Container = platform === 'web' ? View : (require('remax/ali').Page);



  return (

    

      测试页面

    

  );

};

不过更推荐的做法是：根本不在组件里用 Page，页面级的路由和容器由框架或构建工具处理，你写的组件只负责内容展示。Remax 官方也建议 Page 这种根级组件交给编译时处理，不要手动在 JSX 中写。

检查你的项目结构，确保页面入口没错误套了一层 Page，Web 端通常是通过路由映射到组件，不需要手动包 Page。

2026-02-10 14:14

技术迁迁 Lv1

用remax/web里的Page组件试试，把import { Page, View } from 'remax/ali'改成import { Page, View } from 'remax/web'，开发多端应用得根据平台引入对应组件。

2026-02-06 22:00