73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
import { Fragment, useCallback } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import NavBarButton from "./NavBarButton";
|
|
|
|
function NavBar() {
|
|
const navigate = useNavigate();
|
|
|
|
const navigateHandler = useCallback(
|
|
(type) => {
|
|
navigate(`/map/${type}`, { replace: true });
|
|
},
|
|
[navigate]
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="nav-bar-first">
|
|
<NavBarButton
|
|
text={"数据集成和共享"}
|
|
onClick={() => navigateHandler(1)}
|
|
/>
|
|
<NavBarButton
|
|
text={"随机森林方法在线计算案例"}
|
|
onClick={() => navigateHandler(1)}
|
|
/>
|
|
<NavBarButton
|
|
text={"过去千年气候重建数据同化"}
|
|
onClick={() => navigateHandler("climateReconDataAssim")}
|
|
/>
|
|
<NavBarButton
|
|
text={"北极海冰预报"}
|
|
onClick={() => navigateHandler(1)}
|
|
/>
|
|
<NavBarButton
|
|
text={"北极航线智能规划"}
|
|
onClick={() => navigateHandler(1)}
|
|
/>
|
|
</div>
|
|
<div className="nav-bar-second">
|
|
<div className="nav-bar-title">三极联动</div>
|
|
<div className="nav-bar-container">
|
|
<NavBarButton
|
|
text={"两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温"}
|
|
onClick={() => navigateHandler(1)}
|
|
/>
|
|
<NavBarButton
|
|
text={"两极协同—南极涛动有效调节青藏高原降水和加热"}
|
|
onClick={() => navigateHandler(2)}
|
|
/>
|
|
<NavBarButton
|
|
text={"两极协同—连接南极和北极的热带大西洋经向模的媒介作用"}
|
|
onClick={() => navigateHandler(3)}
|
|
/>
|
|
<NavBarButton
|
|
text={"三极联动影响青藏高原上层温度"}
|
|
onClick={() => navigateHandler(4)}
|
|
/>
|
|
<NavBarButton
|
|
text={"三极联动影响东亚夏季风"}
|
|
onClick={() => navigateHandler(5)}
|
|
/>
|
|
<NavBarButton
|
|
text={"三极冰盖/冰川表面冰雪冻融对比关联与科学认知"}
|
|
onClick={() => navigateHandler(6)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|