在Mapbox GL JS弹出窗口中使用链接引发错误:不变量失败:您不应在<Router>外部使用<Link>

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import mapboxgl from 'mapbox-gl';

class MapboxMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      popupVisible: false,
    };
  }

  componentDidMount() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9,
    });

    map.on('click', () => {
      this.setState({ popupVisible: true });
    });

    map.on('load', () => {
      const popup = new mapboxgl.Popup()
        .setLngLat([-74.5, 40])
        .setHTML(`
          <div>
            <h3>Popup Content</h3>
            <p>This is a popup with a link.</p>
            <Link to="/some-page">Go to Some Page</Link>
          </div>
        `)
        .addTo(map);

      if (!this.state.popupVisible) {
        popup.remove();
      }
    });
  }

  render() {
    return (
      <Router>
        <div ref={(el) => (this.mapContainer = el)} style={{ width: '100%', height: '400px' }} />
      </Router>
    );
  }
}

export default MapboxMap;