How to use the react-router-dom.useLocation function in react-router-dom

const Analytics: React.FC = () => {
  const location = useLocation();

  /**
   * Track each navigation to a page.
   */
  useEffect(() => {
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  }, [location.pathname]);

  // don't actually render anything
  return null;
};

export function useURLState(
  paramToWatch: string,
  defaultValue: T,
  toUrlConverter: (data: T) => string = JSON.stringify,
  fromUrlConverter: (data: string) => T = JSON.parse
): [T, (T) => void] {
  const location = useLocation();
  const [paramValue, setParamValue] = useState(defaultValue);

  const changeParam = (value) => {
    // No change, don't do anything
    if (value === paramValue) {
      return;
    }

    setParamValue(value);

    // Change URL value
    const params = new URLSearchParams(
      // substr removes the hash tag at the beginning
      new URL(window.location.href).hash.substr(1)
    );
    const urlValue = toUrlConverter(value);

export default function FsHasEntry(
  {
    fsEntry,
    style
  }: Props
) {
  const [isOpen, setIsOpen] = useState(false)
  const { openWindow } = useContext(WindowContext)
  const location = useLocation()
  const urlSearchParams = new window.URLSearchParams(location.search)
  const mount = urlSearchParams.get('mount')

  useEffect(
    () => {
      if (mount && mount.length >= fsEntry.path.length) {
        setIsOpen(true)
      }
    },
    [
      mount,
      fsEntry
    ]
  )

  return (

export default function Main(props) {
    const { pathname } = useLocation();

    useEffect(
        () => {
            window.scrollTo(0, 0);
        },
        [pathname]
    );

    return (
        <main>
            </main>

className,
  heading,
  subheading,
  rating,
  color,
  linkTo,
  tags,
  children,
  ...rest
}) => {
  /**
   * Go to review page while setting state
   * so that the current page now becomes the
   * background for the review modal.
   */
  const location = useLocation();
  const linkToWithState = useMemo(
    () => ({
      pathname: linkTo,
      state: {
        background: location,
      },
      search: location.search,
    }),
    [linkTo, location]
  );

  return (

function useLoginErrorMessage() {
  const { t } = useTranslation()
  const loc = useLocation()

  const match = loc.hash.match(/#auth-(.*)/)

  if (match === null) {
    return null
  }

  switch (match[1]) {
    case 'fail':
      return t('Something went wrong when logging in. Please try again.')

    case 'missing-user':
      return t("User doesn't exist in NLX Management.")

    default:
      return null

const ServiceDetailView = ({ service, removeHandler }) => {
  const { internal, inways } = service
  const { t } = useTranslation()
  const location = useLocation()

  const [ConfirmRemoveModal, confirmRemove] = useConfirmationModal({
    okText: t('Remove'),
    children: <p>{t('Do you want to remove the service?')}</p>,
  })

  const handleRemove = async () =&gt; {
    if (await confirmRemove()) {
      removeHandler()
    }
  }

  return (
    &lt;&gt;
      {showServiceVisibilityAlert({ internal, inways }) ? (

export const Intercom = (props) => {
  const location = useLocation()
  const { pathname, search } = location

  useEffect(() => {
    window.Intercom("boot", { app_id })
  }, [])

  useEffect(() => {
    window.Intercom("update")
  }, [pathname, search])

  return null
}

export const SearchProvider = ({ children }) => {
  const location = useLocation()
  const history = useHistory()

  const { query, selectedTags, page, sort } = queryStringToState(
    location.search
  )

  const onChange = changes => {
    const queryString = stateToQueryString({
      query,
      selectedTags,
      page: 1,
      sort,
      ...changes
    })

    history.push({

const Page: React.FC = ({
  config,
  fetchOracleNodes,
  storeAggregatorConfig,
}) => {
  const location = useLocation()

  useEffect(() => {
    storeAggregatorConfig(parseConfig(parseQuery(location.search)))
  }, [storeAggregatorConfig, location.search])

  useEffect(() => {
    fetchOracleNodes()
  }, [fetchOracleNodes])

  let content

  if (config && config.contractVersion === 3) {
    content = 
  } else if (config) {
    content = 
  } else {