React部署后跳转返回时react-typescript-datamaps地图不显示

核心原因 #

react-typescript-datamaps依赖原生Datamaps库，组件卸载时原生实例未被正确销毁，再次挂载时DOM节点被残留实例占用，无法重新初始化；同时生产环境下React的渲染优化可能跳过地图初始化逻辑，本地开发环境无此限制所以正常。

具体修复方案 #

1. 手动管理地图实例生命周期 #

通过useRef保存实例引用，卸载时销毁实例并清理DOM，确保重新挂载能正常初始化：

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

const WorldMap = () => {
  const mapContainerRef = useRef<HTMLDivElement>(null);
  let mapInstance: any = null;

  useEffect(() => {
    if (!mapContainerRef.current) return;

    // 手动初始化原生Datamaps实例
    mapInstance = new (window as any).Datamap({
      element: mapContainerRef.current,
      projection: 'mercator',
      fills: { defaultFill: '#ABDDA4' },
      data: {
        USA: { fillKey: 'USA' },
        // 你的自定义地图数据
      }
    });

    // 卸载时清理实例与DOM
    return () => {
      if (mapInstance) {
        mapInstance.destroy();
        mapContainerRef.current!.innerHTML = '';
      }
    };
  }, []);

  return <div ref={mapContainerRef} style={{ width: '100%', height: '500px' }} />;
};

export default WorldMap;

2. 强制路由切换时组件重新挂载 #

如果使用react-router，给地图路由添加动态key，确保每次返回时组件完全重新初始化：

import { Routes, Route, useLocation } from 'react-router-dom';
import WorldMap from './WorldMap';

function App() {
  const location = useLocation();

  return (
    <Routes location={location} key={location.pathname}>
      <Route path="/map" element={<WorldMap />} />
      {/* 其他路由配置 */}
    </Routes>
  );
}

3. 排查生产环境打包问题 #

检查打包配置（webpack/vite），避免tree shaking误删Datamaps核心代码：

• Vite配置示例：

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // 确保Datamaps相关代码不被拆分
          if (id.includes('datamaps')) return 'datamaps';
        }
      }
    }
  }
});

4. 临时禁用React严格模式（排查用） #

生产环境下React严格模式的双重渲染可能干扰地图初始化，可临时移除<React.StrictMode>标签验证：

// index.tsx
ReactDOM.createRoot(document.getElementById('root')!).render(
    <App />
);

验证步骤 #

1. 部署修复后的代码到服务器
2. 首次加载地图页面，确认显示正常
3. 跳转至其他页面后返回，检查地图是否重新渲染
4. 开启控制台Verbose日志级别，确认无隐藏初始化错误

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