React Router 0.11.1 routes all requests to Home handler

[aknuds1]

I don't know if there's something I'm doing wrong, but after upgrading ChucK Demos from React Router 0.10.x to 0.11.1 and re-writing appropriately, every request is getting routed to the Home handler (my routing takes place in jsx/app.js). I have currently two valid routes, which are '/' and '/about'. Both worked prior to upgrading, but now /about routes to the Home handler and a hash is appended to the URL (so that it becomes e.g. http://localhost:3000/about#/).

My routes look like this:

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute name="home" handler={Home}/>
    <Route name="about" handler={About}/>
  </Route>
)
ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body)
})

Am I doing something wrong? I even tried pasting the routing setup from your README, and everything still routed to Home. Please help make sort out these routing woes.

[mjackson]

This sounds like you're trying to use HTML5 history URLs but you're not specifying it so the router is assuming you're using Router.HashLocation instead. To fix this, use:

ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body)
})

[ryanflorence]

yep :)

https://github.com/aknuds1/chuckdemos/blob/4491f9d2f73dc9ba7c620d93249c9fae5af1e9b2/jsx/app.js#L140

[mjackson]

[aknuds1]

1. Would you mind documenting the location="History" option?

2. Do you know why the hash URLs mode wouldn't work? I couldn't even make your example code work:

   var routes = (
     <Route handler={App} path="/">
       <DefaultRoute handler={Home} />
       <Route name="about" handler={About} />
       <Route name="users" handler={Users}>
         <Route name="recent-users" path="recent" handler={RecentUsers} />
         <Route name="user" path="/user/:userId" handler={User} />
         <NotFoundRoute handler={UserRouteNotFound}/>
       </Route>
       <NotFoundRoute handler={NotFound}/>
       <Redirect from="company" to="about" />
     </Route>
   );
   
   Router.run(routes, function(Handler) {
     React.render(<Handler/>, document.body);
   });
   

[ryanflorence]

1. https://github.com/rackt/react-router/blob/master/docs/api/run.md#location-optional
2. To get that config to work you'd need a lot of other code. We have tons of working examples https://github.com/rackt/react-router/tree/master/examples why not start there?

[aknuds1]

1. Great to see that it's documented at least, but if you have no knowledge of the option in the first place, like I did, it's not that likely you're going to find it. Would you mind mentioning this option in the overview and/or the README? It'd have helped a lot when I was upgrading from 0.10 to 0.11.
2. Ah OK, thanks.