How to use the @reach/router.useLocation function in @reach/router

export default function useHomePageRouter() {
  const routerLocation = useLocation()
  const homeParams = buildHomeParamsFromQuery(routerLocation.search)

  /** reset to the default view for a study */
  function clearHomeParams() {
    navigate('')
  }

  useEffect(() => {
    // if this is the first render, and there are already genes specified, that means they came
    // from the URL directly
    if (homeParams.genes.length > 0) {
      // logGlobalGeneSearch(homeParams.genes, 'url')
    }
  }, [])
  return { homeParams, updateHomeParams, routerLocation, clearHomeParams }
}

const ClientDetails = () => {
  const location = useLocation()
  const { nodeId } = useParams()
  const { confirm } = useConfirmationDialog()

  const [selectedInterfaceId, setSelectedInterfaceId] = useState()
  const [selectedConnectionId, setSelectedConnectionId] = useState()

  const [isJoinNetworkModalOpen, setJoinNetworkModalOpen] = useState(false)
  const [isConnectPeerModalOpen, setConnectPeerModalOpen] = useState(false)

  const getNodeQuery = useQuery(GET_NODE, {
    variables: { id: nodeId },
  })

  const getNodeInterfacesQuery = useQuery(GET_INTERFACES, {
    variables: { nodeId, networkId: '' },
  })

const EditHost = ({ networkId, hostId }) => {
  const location = useLocation()

  const onHostUpdated = () => {
    toast.success('Host updated')
    navigate(-1)
  }

  const onHostUpdateError = () => {
    toast.error('Error updating host')
    navigate(-1)
  }

  const [formState, { text }] = useFormState()

  const getHostQuery = useQuery(GET_HOST, {
    variables: { networkId, id: hostId },
    onCompleted: data => {

const NewLinkView = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const { hostId } = location.state || {}

  const [selectedNetworkId, setSelectedNetworkId] = useState('')
  const [selectedHostId, setSelectedHostId] = useState('')

  const formik = useFormik({
    initialValues: {
      fromInterfaceId: null,
      toInterfaceId: null,
      allowedIps: [],
      persistentKeepalive: null,
    },
    validationSchema: Yup.object().shape({
      fromInterfaceId: Yup.string()
        .required()

const LinkDetailsView = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const urlParams = useParams()

  const { hostId } = location.state || {}

  const formik = useFormik({
    initialValues: {
      fromInterfaceId: null,
      toInterfaceId: null,
      allowedIps: [],
      persistentKeepalive: null,
    },
    validationSchema: Yup.object().shape({
      fromInterfaceId: Yup.string()
        .required()
        .nullable(),
      toInterfaceId: Yup.string()

const NetworksView = () => {
  const [searchFilter, setSearchFilter] = useState('')
  const location = useLocation()

  const { success } = useToast()
  const { confirm } = useConfirmationDialog()

  const getNetworksQuery = useQuery(GET_NETWORKS, {})

  const [deleteNetwork, deleteNetworkMutation] = useMutation(DELETE_NETWORK, {
    variables: { id: undefined },
    onCompleted: () => {
      success('Network deleted')
      getNetworksQuery.refetch()
    },
  })

  useEffect(() => {
    window.scrollTo(0, 0)

const HostLinksTab = ({ hostId }) => {
  const navigate = useNavigate()
  const location = useLocation()

  const [searchFilter, setSearchFilter] = useState('')

  const getHostLinksQuery = useQuery(GET_LINKS, {
    variables: { fromHostId: hostId },
  })

  const [deleteLink, deleteLinkLinksMutation] = useMutation(DELETE_LINK, {
    variables: { id: undefined },
  })

  useEffect(() => {
    getHostLinksQuery.refetch()
  }, [location, getHostLinksQuery])

  const handleCreateButtonClicked = () => {

const HostsListView = () => {
  const [searchFilter, setSearchFilter] = useState('')

  const location = useLocation()

  const getHostsQuery = useQuery(GET_HOSTS, {
    variables: {},
  })

  const [deleteHost, deleteHostMutation] = useMutation(DELETE_HOST, {
    variables: { id: undefined },
    onCompleted: () => {
      toast.success('Host deleted')
      getHostsQuery.refetch()
    },
    onError: () => {
      toast.error('Error deleting host')
    },
  })

const TokensView = () => {
  const location = useLocation()

  const [token, setToken] = useState(undefined)
  const [tokenSecret, setTokenSecret] = useLocalStorage('drago.settings.acl.token', undefined)
  const [isAuthenticated, setAuthenticated] = useState(undefined)

  const formik = useFormik({
    initialValues: {
      secret: tokenSecret || '',
    },
    validationSchema: Yup.object().shape({
      secret: Yup.string(),
    }),
  })

  const handleGetSelfQueryCompleted = (data) => {
    if (data.result !== null) {

export default function GeneSearchProvider(props) {
  const location = useLocation()
  const searchParams = buildParamsFromQuery(location.search, props.preset)
  return (
    
      {props.children}
    
  )
}