react-router backward hooks, support react-router 4.x | 5.x

useRouter.ts

import { __RouterContext as RouterContext, RouteComponentProps } from 'react-router'
import { useContext, useMemo, useCallback } from 'react'
import qs from 'qs'
import { Location } from 'history'

interface ParsedQuery {
  [whatever: string]: any
}

export const useRouter = <T>(): RouteComponentProps<T> =>
  useContext(RouterContext) as RouteComponentProps<T>

export const useLocation = (): Location => {
  const { location } = useRouter()
  return location
}

export const useParams = <T>(): T => {
  const { location } = useRouter<T>()
  // @ts-ignore
  return location.query
}

export const useQuery = <T extends ParsedQuery>(): T => {
  // @ts-ignore
  const { query } = useLocation()
  const q = useMemo(() => qs.parse(query), [query])
  return q as T
}

export const useUpdateQuery = <T extends ParsedQuery>() => {
  const { history } = useRouter()
  const query = useQuery<T>()
  const updateQuery = useCallback(
    (patch: Partial<T>, merge = true): void => {
      const newQuery = merge ? { ...query, ...patch } : patch
      const newSearch = qs.stringify(newQuery)
      history.push({ search: newSearch })
    },
    [history, query],
  )
  return updateQuery
}

export const useRouterBackward = <T>(r: RouteComponentProps<T>): RouteComponentProps<T> =>
  r as RouteComponentProps<T>

export const useLocationBackward = (r: RouteComponentProps<T>): Location => {
  const { location } = useRouterBackward(r)
  return location
}

export const useParamsBackward = <T>(r: RouteComponentProps<T>): T => {
  const { location } = useRouterBackward<T>(r)
  // @ts-ignore
  return location.query
}

export const useQueryBackward = <T extends ParsedQuery>(r: RouteComponentProps<T>): T => {
  // @ts-ignore
  const { query } = useLocationBackward(r)
  const q = useMemo(() => qs.parse(query), [query])
  return q as T
}

export const useUpdateQueryBackward = <T extends ParsedQuery>(r: RouteComponentProps<T>) => {
  const { history } = useRouterBackward(r)
  const query = useQueryBackward<T>(r)
  const updateQuery = useCallback(
    (patch: Partial<T>, merge = true): void => {
      const newQuery = merge ? { ...query, ...patch } : patch
      const newSearch = qs.stringify(newQuery)
      history.push({ search: newSearch })
    },
    [history, query],
  )
  return updateQuery
}

for react-router 4.x:

import {RouteComponentProps} from 'react-router'
import {useRouterBackward, useQueryBackward} from '@/common/hooks'

const DemoComp = (props: RouteComponentProps) => {
  const router = useRouterBackward(props)
  const query = useQueryBackward(props)
  
  return 'nice'
}

for react-router 5.x :

Just call useRouter, useLocation, useQuery function without backward suffix

nice, thank you.