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

import React from 'react';
import ScreenHome from './screenHome';
import ScreenMyPage from './screenMyPage';
import ScreenModal from './screenModal';
import Menu from './menu';
import { Router, createHistory, LocationProvider } from "@reach/router";
import '../platformAssets/runtime/fontManager';
import createHashSource from 'hash-source';


// listen to the browser history
let source = createHashSource();
let history = createHistory(source);

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
        
        <div>
            <menu>
            
                
                
                
            </menu></div>

it('works', () => {
      const history = createHistory(window);

      
        <div>Alright, we've established some location context</div>
      ;
    });

it('works', () => {
      createHistory(window);
    });

expect(() =>
      render(
        
          
            link
          
        
      )
    ).not.toThrow()

import React, { Component } from 'react';
import { createHistory, LocationProvider, Router } from '@reach/router';
import { I18nProvider } from '@lingui/react';
import { catalogs } from 'config/i18n';
import { Home, Login, ForgotPassword, PrivateViews, Dashboard, Opening } from 'pages';
import Auth from 'utils/auth';
import GA from 'utils/ga';

const auth = new Auth();
const history = createHistory(window);

auth.loadSession();
history.listen(GA.trackPage);

export default class App extends Component {
  componentDidMount() {
    GA.init();
    GA.trackPage(window);
  }

  render() {
    return (

var authenticator = new netlify({
      site_id: process.env.REACT_APP_NETLIFY_SITE_ID,
    })
    authenticator.authenticate(
      {provider: 'github', scope: 'public_repo,read:org,read:user'},
      function(err, data) {
        if (err) {
          reject(err)
        }
        resolve(data)
      },
    )
  })
}

const history = createHistory(window)

class GitHubClientProvider extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = {error: null}
    if (this.props.client) {
      this.state.client = this.props.client
    } else {
      const token = window.localStorage.getItem('github-token')
      if (token) {
        this.state.client = this.getClient(token)
      }
    }
  }
  componentDidMount() {
    if (!this.state.client) {

import React, { useState } from 'react'
import {
  Router,
  createHistory,
  LocationProvider
} from "@reach/router"
import uuid from 'uuid/v4'
import createHashSource from 'hash-source'

import Header from './Header'
import Talks from './Talks'
import TalkComments from './TalkComments'
import { TalkModalContext, ClientIDContext } from './contexts'

const source = createHashSource()
const history = createHistory(source)
const CLIENT_ID = uuid()

const AppRouter = ({ children }) => (
  <div>
    {children}
  </div>
)

function App() {
  const [modalVisible, toggleModal] = useState(false)

  function toggle() {
    toggleModal(!modalVisible)
  }

  return (

const Graph = React.lazy(() => import('../hooks/graph'))
const Grapher = React.lazy(() => import('../hooks/grapher'))
const Getter = React.lazy(() => import('../hooks/getter'))
const Poster = React.lazy(() => import('../hooks/poster'))
const Nes = React.lazy(() => import('../hooks/nes'))
const WebSocketExample = React.lazy(() => import('../hooks/websockets'))
const Local = React.lazy(() => import('../hooks/local'))
const Cookie = React.lazy(() => import('../hooks/cookies'))
const Keypress = React.lazy(() => import('../hooks/keypress'))
const Keyhandler = React.lazy(() => import('../hooks/keyhandler'))
const PageViz = React.lazy(() => import('../hooks/page-visibility'))
const OnlineStatus = React.lazy(() => import('../hooks/online-status'))
const EventExample = React.lazy(() => import('../hooks/event-example'))
const MediaQueryMatch = React.lazy(() => import('../hooks/media-match'))
const source = createHashSource()
const history = createHistory(source)

const TabLink = props => {
  return (
    
      {({ location }) => {
        const active = props.to === location.pathname
        return (
          <li>
             {
                const { isCurrent } = prop
                return {
                  className: isCurrent ? 'is-active' : '',
                }
              }}</li>

import React from "react";
import { Router, createMemorySource, createHistory, LocationProvider } from "@reach/router";
import App from "./App";
import HomePage from "./pages/home-page";
import CollectionPage from "./pages/collection-page";

const source = createMemorySource("home");
const history = createHistory(source);

function MainRouter(): JSX.Element {
  return (
    
      
        
          
          
        
      
    
  );
}

export default MainRouter;