Add <Routes baseHref>

[CezaryDanielNowak]

Hey!
When website is in subdirectory (like localhost/projects/MyProject), react router triggers NotFoundRoute instead of DefaultRoute for /.

It would be cool if there is base href option for react-router.

Thanks, Cezary

[CezaryDanielNowak]

OK. I found initialPath property for Routes constructor. Sorry for ticket duplication.

I'd recommend to rename this property to baseHref, cause it's known for front-end developers since HTML 3.2.

[mjackson]

@korpirkor initialPath is not what you're looking for. We don't currently have a way to specify a base URL for all your routes. Instead, you can specify full paths in your <Routes> config.

I'm going to leave this open tho because I think <Routes baseHref> could be interesting. Anyone else have this use case?

[ryanflorence]

@mjackson yeah, but we were all talking about different things here #111

In our app we find it decent to just add the base url to our root route path, everything else is relative from there and not a big deal.

<Routes>
  <Route path="/some/sub/dir">
    <!-- since its relative here, I only have to specify the sub directory once
      which is not really different than a baseUrl option, is it? --> 
   <Route path="foo" />
  </Route>
</Routes>

[mjackson]

Yeah, it's not too much different. I still think <Routes baseHref> could be a nice feature tho. Then you could still use absolute paths in your <Route>s and add/remove the baseHref without changing anything else. Makes it a little more portable.

[mjackson]

<Routes> are gone in 0.11, so this doesn't really make sense any more. If you'd like to have a "base URL", please use the <Route> component as @rpflorence suggested.

[let4be]

Can't make it work @mjackson

I'm developing using webpack so my root url on development machine is like this http://localhost:3000/webpack-dev-server/

<Route path="/">
    <Route path="webpack-dev-server/" handler={App}>
        <Route name="job" handler={Job}/>
        <Route name="about" handler={About}/>
        <DefaultRoute handler={Job}/>
    </Route>
</Route>

I'm i'm doing just

<Route name="app" path="/" handler={App}>
    <Route name="job" handler={Job}/>
    <Route name="about" handler={About}/>
    <DefaultRoute handler={Job}/>
</Route>

it works with subdirectory but I don't see path changing in the address bar when navigate thru the states.
I have html5 mode enabled in webpack-dev-server and it returns index.html for any url

[let4be]

I'm running router with

Router.run(routes, Router.HistoryLocation, Handler => {
    React.render(<Handler/>, document.getElementById('app'));
});

so it's html5 mode

[jhchill666]

Is this now possible, or still considered unnecessary?

Am using react-router@1.0.0-beta3, by the by.

Unfortunately for me, my root path is different on different servers, and again different on our clients prod domains.

I could set the root path dynamically, having assessed the domain structure, but seems fairly brittle. Also, maybe I'm missing something, but Redirects seem to need the full route path for to and from. If this is the case, it makes setting the root path dynamically pretty awkward, as I'd have to prepend all redirects to's and from's with the server context.

let base = "/server/base";

<Route name="app" path={base} handler={App}>
    <Redirect from={base} to{`${base}/SomePage`}/>
    <Route name="page" handler={SomePage}/>
</Route>

SomeOtherClass.js

let base = getBase();
this.context.router.transitionTo(`${base}/login`);

[vrde]

I need it as well for the same reasons @jamiehill explained (the root path is different on different servers). It'd be great if we don't have to pass the baseUrl around, any updates about that?

[vrde]

Maybe the cleanest way is to write a helper to create URLs to prepend the baseUrl to every URL if the URL is absolute (i.e. it starts with a /).

Another solution is to monkey patch some react-router internals, but I still have to figure out where to do this, if any of you can point me to a specific function it'd be nice 😸

[vrde]

OK I found a very interesting example.

You can add the basename while creating the history instance, it looks like this:

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
  basename: '/my-custom-root'
})

[anjianshi]

Thanks @vrde

I have an app runs under http://domain.com/app_name/
Without this, every times I create <Router> or <Link>, I need put the app_name into URL,
Like this:

let base = "/app_name/"

<Router history={browserHistory}>
    <Route path={base} component={App}></Route>
</Router>

<Link path={base + "some_path"}>some_path</Link>

With basename, I can just:

const browserHistory = useBasename(createHistory)({
    basename: "/app_name"
});

<Router history={browserHistory}>
    <Route path="/" component={App}></Route>
</Router>

<Link path="/some_path">some_path</Link>

It's more convenience and clear.