Skip to content

Instantly share code, notes, and snippets.

Embed
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 () {
TokenTransformer.call(this)
this.createUrl = (token, pathPrefix, location) => (
pathPrefix + token
)
this.retrieveToken = (pathPrefix, location) => (
location.pathname.substr(pathPrefix_.length)
)
}
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.
Links:
Source code: https://github.com/google/closure-library/blob/master/closure/goog/history/html5history.js#L272
Existing issues:
https://groups.google.com/d/topic/closure-library-discuss/jY4yzKX5HYg/discussion
https://github.com/google/closure-library/issues/582
Hopefully this saves you time.
*/
@dehli

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))
@scbafk

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))))
@poernahi

This comment has been minimized.

Copy link

@poernahi poernahi commented Mar 21, 2019

Another example of cljs implementation https://github.com/venantius/accountant/pull/48/files

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.