在本地上一切正常,但在部署/映射后不工作。
全额回购:https://github.com/selcukguler0/weather_app
现场:https://weather-app-git-master-selcukguler0.vercel.app
stackblitz:https://stackblitz.com/github/selcukguler0/weather_app?file=src/Map.jsx
只有地图不起作用。
map.jsx
import TurkeyMap from "turkey-map-react";
import { GridLoader } from "react-spinners"; //Loading animation
import "antd/dist/antd.css";
import { Tooltip } from "antd";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
export default function Map() {
console.log("Type of TurkeyMAp",typeof TurkeyMap);
console.log("object" === typeof TurkeyMap);
const navigate = useNavigate();
return (
<div className="">
<header className="flex justify-center items-center gap-3 gap-x-4 ">
<Link
className="text-[40px] text-center font-bold text-blue-500 hover:text-red-500"
to={"/"}>
Home
</Link>
<h1
className="text-[40px] text-center font-bold text-white hover:text-red-500"
to={"/map"}>
Map
</h1>
<Link
className="text-[40px] text-center font-bold text-blue-500 hover:text-red-500"
to={"/cities"}>
Cities
</Link>
</header>
<div>
<TurkeyMap
onClick={({ name }) => {
navigate(`/city/${name}`);
}}
cityWrapper={(cityComponent, cityData) => (
<Tooltip
title={`${cityData.plateNumber} - ${cityData.name}`}
key={cityData.id}>
{cityComponent}
</Tooltip>
)}
/>
</div>
</div>
);
}
导航到/map
并打开控制台会显示130错误,该错误会将您重定向到此链接并显示以下错误:
元素类型无效:应为字符串(用于内置组件(或类/函数(用于复合组件(,但实际为:object。
根据此线程,问题出在导入中:元素类型无效:应为字符串(用于内置组件(或类/函数