NextJS多路由共享MapBox地图如何避免重复渲染导致瓦片重载？

问题根因 #

当前两个路由页面各自独立引入<Map/>组件，NextJS的pages路由在切换不同页面时，会完整卸载旧页面的所有组件，再挂载新页面的组件。哪怕两个页面引用的是同一个Map组件，也会生成新的组件实例，所以地图会重新初始化加载瓦片。shallow路由只能避免重新运行服务端数据获取逻辑，无法阻止组件的卸载挂载流程。

可行解决方案 #

方案1：将Map组件提升至_app.tsx全局渲染 #

_app.tsx是所有页面的根容器，路由切换时不会被卸载，将地图放在这里可以保证实例全局唯一，不会触发重建。

1. 修改_app.tsx代码：

import { useRouter } from 'next/router'
import { Map } from '../components/Map'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  // 仅匹配需要显示地图的路由，其他路由隐藏地图
  const showMap = router.pathname === '/' || router.pathname === '/[id]'

  return (
    <>
      {showMap && <Map />}
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

2. 调整Map组件容器样式，避免影响页面内容布局：

const MapBox = ReactMapboxGl({
    accessToken: "private stuff",
});

export const Map = () => {
    return (
        <MapBox
            style="mapbox://styles/mapbox/streets-v9"
            containerStyle={{
                height: "100vh",
                width: "100vw",
                position: "fixed",
                top: 0,
                left: 0,
                zIndex: -1 // 页面内容默认z-index为0，会覆盖在地图上方
            }}
        ></MapBox>
    );
};

3. 两个路由页面删除原有Map组件的引入和渲染逻辑即可。

方案2：使用公共Layout复用地图实例 #

如果仅部分路由需要地图，可以自定义公共Layout包裹需要显示地图的页面，Layout实例在路由切换时不会被卸载，内部的Map组件自然可以保持状态。

1. 新建公共Layout组件：

import { Map } from './Map'

export const MapLayout = ({ children }) => {
  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      <Map />
      {/* 页面内容放在更高层级，不被地图遮挡 */}
      <div style={{ position: 'relative', zIndex: 1 }}>
        {children}
      </div>
    </div>
  )
}

2. 为两个需要地图的页面指定Layout：

// pages/index.tsx 示例，pages/[id]/index.tsx 做相同配置
import { MapLayout } from '../components/MapLayout'

const HomePage = () => {
  return <div>首页业务内容</div>
}

HomePage.getLayout = (page) => <MapLayout>{page}</MapLayout>

export default HomePage

3. 修改_app.tsx适配自定义Layout：

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

export default MyApp

4. 同样调整Map组件的容器样式为固定定位，和方案1一致。

方案3：使用组件缓存能力保留实例 #

如果不想调整组件层级，可以引入React组件缓存方案，将Map组件包裹后实现状态保留，路由切换时不会卸载组件。

• 安装对应缓存库后，用缓存组件包裹Map组件的渲染逻辑即可，无需调整现有路由和组件层级结构。

注意事项 #

如果地图上需要渲染和当前路由ID关联的标记点、弹窗等内容，可以在Map组件内通过useEffect监听路由参数变化，动态更新对应的地图图层/标记，无需刷新地图本身。

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