我尝试使用 react-leaflet-markercluster ，但在代码中添加 <MarkerClusterGroup> 后，控制台中显示错误，并且页面无法加载。如果不添加此组件，一切都会正常工作。

也许问题出在版本冲突上，但我尝试回滚 react-leaflet 的版本，但在将 [email protected] 与其余软件包一起安装时也会出现冲突。因此，我决定专注于使用实际版本。

App.js

import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/dist/styles.min.css'

const App = () => {
  return (
    <div className="container">
      <MapContainer className="map-container" center={[49.8397, 24.0297]} zoom={6}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />        
        <MarkerClusterGroup>
          <Marker position={[49.8397, 24.0297]} />
          <Marker position={[52.2297, 21.0122]} />
          <Marker position={[51.5074, -0.0901]} />
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  )
}

export default App

错误：

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
    at useLeafletContext (context.js:9:1)
    at usePath (path.js:18:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at updateForwardRef (react-dom.development.js:19968:1)
    at beginWork (react-dom.development.js:22391:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork$1 (react-dom.development.js:27243:1)

package.json 依赖项：

"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"leaflet": "^1.8.0",
"leaflet.markercluster": "^1.5.3",
"react-leaflet": "^4.0.0",
"react-leaflet-markercluster": "^3.0.0-rc1"