38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import { Button } from "antd";
|
|
import { useCallback } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import NavBarButton from "./NavBarButton";
|
|
|
|
function NavBar() {
|
|
const navigate = useNavigate();
|
|
const navigateHandler = useCallback(
|
|
(e) => {
|
|
navigate("/polygon", { replace: true, state: { xx: 1 } });
|
|
},
|
|
[navigate]
|
|
);
|
|
|
|
return (
|
|
<div className="nav-bar">
|
|
<NavBarButton
|
|
key={1}
|
|
text={"两极协同-拉布拉多海"}
|
|
onClick={navigateHandler}
|
|
/>
|
|
<NavBarButton
|
|
key={2}
|
|
text={"两极协同-南极青藏高原"}
|
|
onClick={navigateHandler}
|
|
/>
|
|
<NavBarButton text={"两极协同-大西洋"} onClick={navigateHandler} />
|
|
<NavBarButton text={"三极协同-青藏高原上层"} onClick={navigateHandler} />
|
|
<NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
|
|
<NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
|
|
<NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
|
|
<NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|