useNavigation을 이용하여 custom Hook으로 가공하여 사용하는 방법

1. custom Hook

// useMovePage.ts

import { useNavigate, To, NavigateOptions } from 'react-router-dom'
import { useRecoilState } from 'recoil'
import { isOpenDrawerState } from 'atoms/appBarAtom'

export function useMovePage() {
  const [isOpenDrawer, setIsOpenDrawer] = useRecoilState(isOpenDrawerState)
  const navigate = useNavigate()

  const setPage = (url: To, state?: NavigateOptions) => {
    if (isOpenDrawer) {
      setIsOpenDrawer(false)
    }
    return navigate(url, { state })
  }

  return [setPage]
}

export default useMovePage

2. 사용법

const [setPage] = useMovePage()

const handleMovePage = (event) => {
	setPage('/')
}

...
...