Expo Web能否为指定路由禁用静态渲染？（react-leaflet相关）

一、选择性禁用特定路由的静态渲染（Expo SDK 49+） #

从Expo SDK 49开始，官方支持在app.json中配置排除特定路由的静态渲染，让目标路由单独使用单页应用模式：

修改app.json的web配置项：

{
  "expo": {
    "web": {
      "output": "static",
      "static": {
        "excludeRoutes": ["/map"]
      }
    }
  }
}

配置后，除/map外的所有路由仍保持静态渲染，/map路由会以单页模式构建，彻底避开window is not defined的静态渲染错误。

二、动态导入组件（无需修改全局配置） #

如果你的Expo版本不支持路由排除，或者想更灵活控制加载时机，可以通过客户端环境检测+动态导入的方式，避免在静态渲染阶段加载依赖window的组件：

在Map.web.tsx中修改代码：

import React, { useEffect, useState } from 'react';

const Map = () => {
  const [LeafletMap, setLeafletMap] = useState(null);

  useEffect(() => {
    // 仅在浏览器客户端环境加载react-leaflet组件
    import('react-leaflet').then(module => {
      setLeafletMap(module.Map);
    });
  }, []);

  if (!LeafletMap) {
    // 静态渲染阶段返回占位内容，比如加载提示
    return <div style={{ width: '100%', height: '100vh' }}>加载地图中...</div>;
  }

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <LeafletMap center={[51.505, -0.09]} zoom={13}>
        {/* 你的地图图层、控件等内容 */}
      </LeafletMap>
    </div>
  );
};

export default Map;

利用useEffect仅在客户端执行的特性，延迟加载依赖window的组件，静态渲染时只会返回占位内容，不会触发错误。

三、适配Next.js（可选迁移方案） #

如果项目可以兼容Expo + Next.js的组合，Next.js支持对特定路由禁用服务端渲染：

import dynamic from 'next/dynamic';

const Map = dynamic(() => import('../components/Map.web'), {
  ssr: false,
  loading: () => <div>加载地图中...</div>
});

这个方案需要调整项目结构适配Next.js，适合有迁移计划的场景。

内容的提问来源于stack exchange，提问作者VariabileAleatoria