HashHistoryCaveats.md

Caveats of Using Hash History

Using window.location.hash is a common trick that is used to mimic the HTML5 history API in older browsers. It works for most use cases and provides good compatibility across a wide range of browsers. However, in order to preserve state across browser sessions we need a place to store some state.

HTML5 gives us the pushState method and the popstate event, but in older browsers the only thing we have is the URL. So, when using location.state with hash history, you'll see an extra item in your query string that looks something like _k=123abc. This is a key that history uses to look up persistent state data in window.sessionStorage between page loads. If you prefer to use a different query parameter, use the queryKey configuration option.

import createHistory from 'history/lib/createHashHistory'

// Use _key instead of _k.
const history = createHistory({
  queryKey: '_key'
})

One other thing to keep in mind when using hash history is that you cannot also use window.location.hash as it was originally intended, to link an anchor point within your HTML document.

Using Different Hash Types

Several types of hash URLs are supported if you'd like to customize the characters that appear in your hash fragment. They are:

• slash (the default, prefixes all hash paths with /)
• hashbang (Google's deprecated crawlable recommendation)
• noslash (omits the leading / in the URL)

Use the hashType option to select one of these when you create your hash history.

const history = createHistory({
  hashType: 'hashbang'
})