时间戳

首页 > 解决方案 > React Mapbox 在路由之间持久化映射

reactjs - React Mapbox 在路由之间持久化映射

问题描述

最近，我一直在尝试实现一个 MapBox 地图，它在我的 NextJS 页面上的多个路线之间共享，但是当导航例如从foo.com使用foo.com/bar时router.push("/${id}", undefined, { shallow: true });（出于测试目的，这些路线是相同的并且共享相同的<Map/>组件），地图重新-renders 导致烦人的 tile-re-render 大约需要 2 秒。

我的问题是，有没有办法<Map/>在路由之间保留组件而不需要重新渲染它？对于库，我尝试同时使用mapbox-gl和react-mapbox-gl，对于框架，我使用 React 和 NextJS。

这是我的<Map/>组件实现

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

export const Map = () => {
    return (
        <MapBox
            style="mapbox://styles/mapbox/streets-v9"
            containerStyle={{
                height: "100vh",
                width: "100vw",
            }}
        ></MapBox>
    );
};

这是我的路由设置：

my-project/
├─ pages/
│  ├─ [id]/
│  │  ├─ index.tsx < Contains the <Map/> component
│  ├─ index.tsx < Contains the <Map/> component
│  ├─ _app.tsx

标签： reactjstypescriptnext.jsmapbox

解决方案

推荐阅读