Basename is not used in createHref

[jochenberger]

I use a basename in my router setup. In one of my components I have a Link to="/". The href attribute points to http://${hostname}/ instead of http://${hostname}/${contextPath}. The click handler works fine though.

[timdorr]

Pass it in as a prop to BrowserRouter or HashRouter.

[jochenberger]

I'm doing that, but it seems to be ignored for the href.

[timdorr]

I'll double-check when I'm at a computer, but it's got tests at least: http://github.com/ReactTraining/react-history/commit/b61ae2c362a34fe6545b24f5f06c77d23ab050b7

[jochenberger]

I do about this:

<Router basename='/foo'>
  <Match exactly pattern="/" render={()=><Link to="/">Index</Link>} />
</Router>

The link renders as <a href="/"> but I expect it to render as as <a href="/foo">. The click handler works fine though, so it's more of a cosmetic issue.

[chentsulin]

My comments in #3843: #3843 (comment)

Those tests didn't cover Link's href.

[timdorr]

@chentsulin

It seems that history is no longer responsible for creating hrefs. See remix-run/history#365 (comment)

And Link component just use router.createHref to create hrefs, so miss the basename: https://github.com/ReactTraining/react-router/blob/v4/modules/Link.js#L91

Ah, shazbot. Well, that's a little confusing as to who should be responsible then? Let me see what the thought process is on that and we can either re-open that PR or integrate the ideas in a more clear API. I feel like history should be aware of it, but we'll see if that stops at react-history or not.

Either way, thanks for this issue!

[mjackson]

Just to clarify where responsibilities are: history has no knowledge of queries, so router is responsible for creating hrefs. It does know about basenames, but all locations you get in the history.listen callback already have properly-truncated pathnames.

EDIT: Likewise, all paths that you pass to functions like history.push should not have basenames in them.

[timdorr]

Started a fix over in #3858. Need to do the latter part of what @mjackson said.

[jochenberger]

Now I'm confused. Consider the following:

<Router basename='/foo'>
  ...
  <Link to={"bar"} /> // renders `href='/foo/bar'` but transitions to `/foobar` [sic]
  <Link to={"/bar"} /> // renders `href='/bar'` but transitions to `/foo/bar`
  ...
</Router>

I'd say they should both behave the same, i.e. render href='/foo/bar' and transition to /foo/bar.

[timdorr]

@jochenberger That is not how it should end up behaving. This area of the code should be considered "in progress".

[jochenberger]

Yes, I thought so, that's why I let you know. ;-)

[mjackson]

I'm looking into this today.

[nibblesnbits]

Is there any progress on this? I've noticed that the behavior for this in the 4.0.0-alpha.4 package is incorrect. The docs reflect this as well.

basename

The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory.

<HashRouter basename="/calendar" />

// now links like this:
<Link to="/today"/>
// will generate links with an href to "#/calendar/today"

That last comment is the issue. If my application exists at http://example.com/calendar/, then what should be generated is a link to /calendar/#/today, not #/calendar/today. As it stands now, the actual behavior is as documented.

[pshrmn]

@nibblesnbits If your app exists at http://example.com/calendar/, then a link within your app to #/today is a link to http://example.com/calendar/#/today, no basename is necessary.

Basenames are used to change the root url (location of /). Everything before the root doesn't matter to RR. For the <HashRouter>, #/ is the root url, so http://example.com/calendar/ doesn't matter.

[patotoma]

Hey @pshrmn, basename is required for that /calendar thing because it is a subdirectory and not the actual root of the webserver.

[ryanflorence]

07725d7 fixes this? let me know if it doesn't and we'll reopen.

[patotoma]

Hello @ryanflorence, sorry for a stupid question but how can I try this thing out? Is it already merged and published on npm? I found that this was merged a month ago but I experienced these issues a few days ago so in that case this commit wasnt helpful. Thanks in advance.

[nibblesnbits]

@patotoma, the easiest way I know of is to npm link from the repo.

1. Download the repo, and npm install its dependencies.
2. npm link the package so that you can use it from other projects on that machine.
3. npm install the version of react-router that you linked in you project and test as needed.