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

MenuItem
} from "@reach/menu-button";
import {
  Router,
  Link,
  createMemorySource,
  createHistory,
  LocationProvider
} from "@reach/router";
import "@reach/menu-button/styles.css";

export let name = "With Links";

// this is because we're in an iframe and not a
// pushState server inside of storybook
let memoryHistory = createHistory(createMemorySource("/"));

export function Example() {
  return (
    
      
        
        
      
    
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2></div>

import { createMemorySource, createHistory } from '@reach/router'
import moment, { utc } from 'moment'
const { remote } = window.require('electron')
import path from 'path'
import URL from 'url-parse'

const DEFAULT_AVATAR = 'https://react.semantic-ui.com/images/wireframe/square-image.png'

export interface Message {
  name: string
  payload?: any
}

export type Screen = 'starting' | 'loading' | 'online' | 'error' | 'onboard' | 'landing'

const source = createMemorySource('/')
const history = createHistory(source)

// tslint:disable-next-line:no-empty-interface
export interface Store {}

export interface ProfileInfo {
  name: string
  avatar: string
  date: string
  address: string
}

export interface AppInfo {
  appId: string
  appName: string
  link: string

it(`does not fail with missing __BASE_PATH__`, () => {
    global.__PATH_PREFIX__ = ``
    global.__BASE_PATH__ = undefined

    const source = createMemorySource(`/active`)

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

it('works', () => {
      createMemorySource('/starting/url');
    });

it('works', () => {
      createMemorySource('/starting/url');
    });

test('It finds the page if user tries a nonsense path', () => {
            const badPath = '/awefwaef'
            const source = createMemorySource(badPath)
            const hist = createHistory(source)
            const r = render(
                
                    
                ,
                )

            expect(r.find('.default-component')).toHaveLength(1)
            expect(r.find('.default-component1')).toHaveLength(0)
        })

test('It doesn\'t find the page if user tries a valid path', () => {
            const goodPath = '/titles'
            const source = createMemorySource(goodPath)
            const hist = createHistory(source)
            const r = render(
                
                    
                ,
                )

            expect(r.find('.default-component')).toHaveLength(0)
            })
        })

const setup = ({ sourcePath = `/active`, linkProps, pathPrefix = `` } = {}) => {
  global.__BASE_PATH__ = pathPrefix
  const source = createMemorySource(sourcePath)
  const history = createHistory(source)

  const utils = render(
    
      
        link
      
    
  )

const renderWithRouter = (ui, renderOptions = {}, { pathname = "/" } = {}) => {
  const history = createHistory(createMemorySource(pathname));
  return render(
    {ui},
    renderOptions
  );
};

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;