useHistoryはuseNavigateにv6で置き換えられた！

[orizo-ono]

https://github.com/remix-run/react-router/issues/7189

[orizo-ono]

従来のv5

import { Box, Flex, Heading, Link, useDisclosure } from "@chakra-ui/react";
 import { FC, memo, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { MenuIconButton } from "../../atoms/button/MenuIconButton";
 import { MenuDrawer } from "../../molecules/MenuDrawer";

 export const Header: FC = memo(() => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const navigate = useNavigate();
   const onClickHome = () => useCallback(() => navigate("/home"), []);
   const onClickUserManegement = () => useCallback(() => navigate("/home_usermanegement"), []);
   const onClickSetting = () => useCallback(() => navigate("/home/setting"), []);
   return (
     <>
       <Flex as="nav" bg="teal.500" color="gray.50" align="center" justify="space-between" padding={{ base: 3, md: 5 }}>
         <Flex as="a" align="center" mr={8} _hover={{ cursor: "pointer" }} onClick={onClickHome}>
           <Heading as="h1" fontSize={{ base: "md", md: "lg" }}>
             ユーザー管理アプリ
           </Heading>
         </Flex>
         <Flex align="center" fontSize="sm" flexGrow={2} display={{ base: "none", md: "flex" }}>
           <Box pr={4}>
             <Link>ユーザー一覧</Link>
           </Box>
           <Link>設定</Link>
         </Flex>
         <MenuIconButton onOpen={onOpen} />
       </Flex>
       <MenuDrawer isOpen={isOpen} onClose={onClose} />
     </>
   );
 }); 

v6は

import { Box, Flex, Heading, Link, useDisclosure } from "@chakra-ui/react";
 import { FC, memo } from "react";
 import { useNavigate } from "react-router-dom";
 import { MenuIconButton } from "../../atoms/button/MenuIconButton";
 import { MenuDrawer } from "../../molecules/MenuDrawer";

 export const Header: FC = memo(() => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const navigate = useNavigate();
   const onClickHome = () => navigate("/home");
   const onClickUserManegement = () => navigate("/home/user_manegement");
   const onClickSetting = () => navigate("/home/setting");
   return (
     <>
       <Flex as="nav" bg="teal.500" color="gray.50" align="center" justify="space-between" padding={{ base: 3, md: 5 }}>
         <Flex as="a" align="center" mr={8} _hover={{ cursor: "pointer" }} onClick={onClickHome}>
           <Heading as="h1" fontSize={{ base: "md", md: "lg" }}>
             ユーザー管理アプリ
           </Heading>
         </Flex>
         <Flex align="center" fontSize="sm" flexGrow={2} display={{ base: "none", md: "flex" }}>
           <Box pr={4}>
             <Link onClick={onClickUserManegement}>ユーザー一覧</Link>
           </Box>
           <Link onClick={onClickSetting}>設定</Link>
         </Flex>
         <MenuIconButton onOpen={onOpen} />
       </Flex>
       <MenuDrawer isOpen={isOpen} onClose={onClose} />
     </>
   );
 });

所感

• useCallBackはいらないっぽい。
• めちゃんこスッキリする！