React Leaflet组件无内容显示，请求故障原因排查

你的代码存在几个关键问题，导致地图无法正常渲染：

• MapContainer属性名错误：React Leaflet中地图容器的中心点属性为小写的center，你写成了大写的Center，组件无法识别该属性，导致地图没有初始定位。
• 高度设置无效：style={{height: '100%'}}的生效依赖父元素的高度，如果父组件未设置明确高度，100%会被解析为0，地图因此不可见。可以改为固定高度（比如'800px'），或者确保父元素及上层容器都设置了height: 100%（包括html和body标签）。
• 转义字符使用错误：TileLayer的url和attribution中使用的"转义双引号会导致URL解析异常，直接使用普通双引号或单引号包裹属性值即可。

修正后的代码示例：

// material-ui
import { TileLayer, MapContainer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

// ==============================|| SAMPLE PAGE ||============================== //

const Dashboard_5G = () => {
    return (
        <MapContainer center={[0, 0]} zoom={4} style={{height: '800px'}}>
            <TileLayer
                attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
            />
        </MapContainer>
    )
};

export default Dashboard_5G;

当前显示效果：

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