How to use the @reach/router.globalHistory.location function in @reach/router

const getIndex = () => {
  const { pathname } = globalHistory.location
  const paths = pathname.split('/')
  const n = Number(paths[paths.length - 1])
  const index = isNaN(n) ? 0 : n
  return index
}

const isPrintPath = () => {
  const { pathname } = globalHistory.location
  const parts = pathname.split('/')
  const path = parts[parts.length - 1]
  return path === 'print'
}

constructor(props) {
		super();
		const link = globalHistory && globalHistory.location && globalHistory.location.pathname;
		const { file } = props;
		const sidebarFile = getSidebarFile(file);
		const items = sidebarFile.groups
			? sidebarFile.groups
					.filter(item => !!item.items)
					.reduce((agg, item) => {
						const parsedItems = item.items.map(links => ({
							...links,
							topic: item.group,
						}));

						return [...parsedItems, ...agg];
					}, [])
			: sidebarFile.items;
		let group = null;
		if (link) {

<div style="{{">
        <pre>          {index} of {slides.length - 1}
        </pre>
        <div style="{{">
        <a style="{{" href="{globalHistory.location.origin" rel="noopener noreferrer">
          Open New Window
        </a>
        <div style="{{">
        
      </div>
    </div>
  )
}
</div>

alignItems: "center",
            justifyContent: "space-between",
            width: "100%",
            padding: "0 16px",
            background: "#333"
          }}
        >
          <pre>            Slide {index + 1} of {slides.length}
          </pre>
          
        
        <a style="{{" href="{globalHistory.location.origin" rel="noopener noreferrer">
          Open Slides in New Window
        </a>
      
      <div style="{{">
        </div>

const getValue = () => {
	if (globalHistory) {
		const path = globalHistory.location && globalHistory.location.pathname;
		if (path && path.startsWith('/docs/reactivesearch/v2')) {
			return 'React - v2';
		}
		if (path && path.startsWith('/docs/reactivesearch/vue-searchbox')) {
			return 'Vue SearchBox';
		}
		if (path && path.startsWith('/docs/reactivesearch/vue')) {
			return 'Vue';
		}
		if (path && path.startsWith('/docs/reactivesearch/native')) {
			return 'Native';
		}
		if (path && path.startsWith('/docs/reactivesearch/searchbase')) {
			return 'SearchBase';
		}
		if (path && path.startsWith('/docs/reactivesearch/react-searchbox')) {

export default props => {
  const context = useDeck()
  const { index, length } = context

  return (
    
      <div>
        {index} / {length - 1}
      </div>
      <div>
        <a rel="noopener noreferrer" href="{globalHistory.location.href}">
          Open in New Window ↗︎
        </a>
      </div>
      <div>
      <div></div></div>

const getQuery = () => {
  const query = querystring.parse(
    globalHistory.location.search.replace(/^\?/, '')
  )
  return query
}

useEffect(() => {
    const { pathname, search } = globalHistory.location
    if (mode !== modes.NORMAL && mode !== modes.PRINT) {
      const query = '?' + querystring.stringify({ mode })
      if (query === search) return
      navigate(query)
    } else {
      if (!search) return
      navigate(pathname)
    }
  }, [mode])