Add `baseHref` or `rootUrl` for React-Router about history

[mjackson]

Something like this could work:

function useBasename(createHistory) {
  return function (options={}) {
    let { basename, ...historyOptions } = options
    let history = createHistory(historyOptions)

    function listen(listener) {
      return history.listen(function (location) {
        // When new locations are emitted, remove the basename
        // from the beginning of the pathname.
        if (location.pathname.indexOf(basename) === 0)
          location.pathname = location.pathname.replace(basename, '')

        listener(location)
      })
    }

    // Override all navigation functions with basename-aware versions.
    function pushState(state, path) {
      history.pushState(state, createPath(path))
    }

    function replaceState(state, path) {
      history.replaceState(state, createPath(path))
    }

    function createPath(path) {
      return basename + path
    }

    function createHref(path) {
      return history.createHref(createPath(path))
    }

    return {
      ...history,
      listen,
      pushState,
      replaceState,
      createPath,
      createHref
    }
  }
}

let history = useBasename(createHistory)({
  basename: '/myapp/section'
})

We should probably write some tests for it though :P

[jamischarles]

Awesome. Thx @mjackson. I'll take a stab at this on monday.

[rtelicak]

Hi,

I tried that snippet, but didn't work. I think you forgot to return listen function as well, like

...

return {
  ...history,
  pushState,
  replaceState,
  createPath,
  createHref,
  listen
}

Thank you.

[mjackson]

Ah, yes @rtelicak. I forgot to add listen. I'll update my comment.