How to use the gatsby.withPrefix function in gatsby

event.preventDefault()

	if (inTransition) return false

	let hash

	// handle anchor links to ID's
	if (to.includes('#')) {
		const toSplit = to.split('#')
		to = toSplit[0]
		hash = toSplit[1]
	}

	// these globals prevent the back button from being pressed during a transition as that can have unexpected results
	window.__tl_inTransition = true
	window.__tl_desiredPathname = withPrefix(to)

	updateContext({
		inTransition: true,
		exitDelay: 0,
		exitLength: 0,
		appearAfter: 0,
		exitState: {},
	})

	if (trigger && typeof trigger === 'function') {
		trigger(pages)
	}

	const {
		length: exitLength = 0,
		delay: exitDelay = 0,

function isPageSelected(path, pathname) {
  const [a, b] = [withPrefix(path), pathname].map(string =>
    string.replace(/\/$/, '')
  );
  return a === b;
}

function isPageSelected(path, pathname) {
  const [a, b] = [withPrefix(path), pathname].map(string =>
    string.replace(/\/$/, '')
  )
  return a === b
}

background-image: url("${withPrefix('icons/data.svg')}");
      }
      i.js {
        background-image: url("${withPrefix('icons/javascript.svg')}");
      }
      i.cp {
        background-image: url("${withPrefix('icons/algorithm.svg')}");
      }
      i.back {
        background-image: url("${withPrefix('icons/server.svg')}");
      }
      i.more {
        background-image: url("${withPrefix('icons/web-development.svg')}");
      }
      i.game {
        background-image: url("${withPrefix('icons/pacman.svg')}");
      }
    }
  }

  &__interests__title {
    font-family: 'Open Sans';
    text-transform: uppercase;
    background: #3384a0;
    color: white;
    font-size: 16px;
    padding: 10px 85px;
    display: inline-block;
  }
}

p.para {

<a href="//retailmenot.com">
                        <img src="{withPrefix('/images/r-mark.svg')}">
                    </a>
                    <a href="//github.com/RetailMeNot/anchor">
                        <img src="{withPrefix('/images/octocat.svg')}">
                    </a>
                
            
        
    
);

function getId(title) {
  return withPrefix(title)
}

const Anchor = ({active, page, onclick}) => {
    let style = active ? 'active nav-link ' : 'nav-link ';

    if (page.items) {
        style += 'collapse-toggle';

        return(
            <a href="#no">
                <span>{page.title}</span>
                <svg>
                    
                </svg>
            </a>
        );
    }

    return (
        
            <span>{page.title}</span>
        
    );
};

content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        
        
        
        
        
        
        
        
        
        {tags.map(tag => (
          
        ))}

name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

{headComponents}
      
      
        {preBodyComponents}
        <div id="___gatsby"></div>