Skip to main content

useRouter() ↔ Custom Hook to combine useParams(), useLocation(), useHistory() & useRouteMatch()

boilerplate snippet for custom useRouter combo hook

export default function useRouter() {
  const params = useParams()
  const location = useLocation()
  const history = useHistory()
  const match = useRouteMatch()
  
  // return memoized Router object with history methods
  return useMemo(() => {
    return {
      push: history.push,
      replace: history.replace,
      pathname: location.pathname,
      query: {
        ...queryString.parse(location.search),
        ...params
      },
      match,
      location,
      history
    }
  }, [params, match, location, history]
}

References​