React-router: Support <base href> in HTML documents

[MoOx]

Reminder https://developer.mozilla.org/en/docs/Web/HTML/Element/base

The HTML Base Element () specifies the base URL to use for all relative URLs contained within a document. There can be only one element in a document.

my route(s):

  <Route component={Layout}>
    <Route path="*" component={PageContainer} />
  </Route>

I am currently using react-router (beta 3) with a <base href="/mybase/" /> and I am getting issue with the splat params depending on how I load a page:

• during my first load of /mybase/, my splat is "mybase"
• If I navigate to <Link to="docs/setup">Setup</Link>, I go correctly to /mybase/docs/setup (which is correct according to how <base> should help me) and my splat is docs/setup - this is good for me
• If I navigate to <Link to=".">Home</Link>, I got as splat the value .. A bit weird, but it's ok too, since according to my base url, give me the right full url when doing my xhr request (I use xhr to load my data)

My main issue here is the behavior of the first time, which is reproducible by navigating to the home by bypassing the <base > with something like this <Link to="/mybase/">Home</Link>.

According to the <base> doc, <Link to="/mybase/">Home</Link> is equal to <Link to=".">Home</Link> if base is set to /mybase/.
But in the context of react-router, the splat (and so probably all the routing) can be confused.
A detail that frustrate me is that splat does not keep the slashes around the value. If I got splat to . or /mybase/ (instead of . and mybase/-- without slashes) I could get my code working "as expected".

I will try to upgrade to 1.0 (not beta), but I didn't find any reference to the <base>...

Or maybe there is just a wait to get slashes in the splat value ?

[MoOx]

I am also unsure why the splat can be . when the actual url in my browser is /mybase/ :)

[MoOx]

And maybe it can be a good idea to add a base param to react-router (or read the <base>), in order to prevent this kind of issue.

[mjackson]

Relevant: we now have support for basenames in the history package.

[MoOx]

Good to know :)

[mjackson]

So, for now I think you can just do this:

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
  basename: document.getElementsByTagName('base')[0].getAttribute('href')
})

React.render((
  <Router history={history}>
    // ...
  </Router>
), node)

I do still think that we could try to do this automatically, but why don't you try it for now and let me know how it goes :)

[mjackson]

BTW, you'll need rc1 to do this. rc2 should be ready this week.

[mjackson]

Since this seems like more of history issue, let's follow up in https://github.com/rackt/history/issues/94.