       # after it is processed. 
       seek_to_hash = true
 
-    loc.url = url or '/'
+    url ?= '/'
+    path = url 
+    if path.substring(0, Earl.root.length) != Earl.root
+      path = Earl.root + '/' + path 
+
+    loc.path = path.replace('//', '/')
+    loc.url = path.substring(Earl.root.length).replace('//', '/')
     loc.hash = hash
     save loc
 

  dom.A = ->
    props = @props
    if @props.href

      # Earl will call a click handler that the programmer passes in
      onClick = @props.onClick or (-> null)

      handle_click = (event) =>
        href = @props.href

        internal_link = !href.match('//') || !!href.match(location.origin)
        is_mailto = !!href.toLowerCase().match('mailto')
        opened_in_new_tab = event.altKey  || \
                            event.ctrlKey || \
                            event.metaKey || \
                            event.shiftKey
        
        # In his wisdom, Earl sometimes just lets the default behavior occur
        if !internal_link || opened_in_new_tab || is_mailto \
           || @props.target == '_blank'
          onClick event

        # ... but other times Earl is history aware
        else 
          event.preventDefault()
          event.stopPropagation()
          Earl.load_page href
          onClick event


  Earl.root = get_script_attr('earl', 'root') or '/'
  if window.location.pathname.match('.html')
    Earl.root += location.pathname.match(/\/([\w-_]+\.html)/)[1] + '/'
  if Earl.root[0] != '/'
    Earl.root = '/' + Earl.root

  # Earl, don't forget to update us if the browser back or forward button pressed
  window.addEventListener 'popstate', (ev) -> 
