Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
goog.HTML5History with query params
A fix for HTML5History with query parameters.
Hey, this wasted my time so here is an explanation.
By default, Closure's goog.HTML5History does the stupid
thing of adding query params of the current location to
whatever new path you are navigating to. I did not need
that so here is the fix:
const {HTML5History} = goog;
const {TokenTransformer} = HTML5History;
function SaneTokenTransformer () {
this.createUrl = (token, pathPrefix, location) => (
pathPrefix + token
this.retrieveToken = (pathPrefix, location) => (
const myHistory = new HTML5History(null, new SaneTokenTransformer())
Supplying your own transformer which does not add the
location's search string to the end fixes the issue.
Source code:
Existing issues:
Hopefully this saves you time.

This comment has been minimized.

Copy link

@dehli dehli commented Apr 13, 2017

Thanks for sharing this! For anyone that comes across this using ClojureScript, here's the appropriate code:

(defn SaneTokenTransformer []
  (this-as this
    (.call Html5History.TokenTransformer this)
    (set! (.-createUrl this)
          #(+ %2 %1))
    (set! (.-retrieveToken this)
          #(subs (.-pathname %2) (count %1)))

This comment has been minimized.

Copy link

@scbafk scbafk commented Aug 25, 2017

I had to modify cljs version a bit to work.

(def token-transformer (Html5History.TokenTransformer.))

(set! (.-createUrl token-transformer)
  (clj->js (fn [token path-prefix location]
    (str path-prefix token))))

(set! (.-retrieveToken token-transformer)
  (clj->js (fn [path-prefix location]
    (.-pathname location))))

This comment has been minimized.

Copy link

@poernahi poernahi commented Mar 21, 2019

Another example of cljs implementation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.