remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
52.8k stars 10.22k forks source link

Can't get transitionTo to use HTML5 History instead of Hash #1044

Closed 01AutoMonkey closed 9 years ago

01AutoMonkey commented 9 years ago

For example when I do .transitionTo('/'); when I'm at /query/777, I go to /query/777#/ and not /. The routes work correctly though when I'm traveling through a Router.Link. So basically, how can I get my .transitionTo code to use HTML5 History like my Router.Link instead of a Hash?

// package.json
...
  "dependencies": {
    "jquery": "2.1.3",
    "jquery-mousewheel": "^3.1.12",
    "react": "^0.12.2",
    "react-router": "^0.12.2",
    "reactable": "~0.10.1",
    "reflux": "~0.2.7"
  }
...
// RouterContainer.js
...
var _router;

module.exports = {
    get: function() {
        return _router;
    },

    set: function(router) {
        _router = router;
    }
};
...
// Routes.js
...
var Routes = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute name="home" handler={Home} />
    <Route name="query" path="/query/" handler={Query}>
      <Route name="json" path="/query/:json" handler={JSON}/>
    </Route>
  </Route>
);

var RouterContainer = require('./RouterContainer');
RouterContainer.set(Router.create({
    routes: Routes
}));
...
// store.js
...
updateURL: function() {
    RouterContainer.get().transitionTo('/'); // doesn't work
    // RouterContainer.get().transitionTo('home'); // doesn't work either
}
...
// main.js
...
Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
  React.render(<Handler />, document.body);
});
...
01AutoMonkey commented 9 years ago

Found the solution!

Instead of:

RouterContainer.set(Router.create({
    routes: Routes
}));

One should pass in a location field like so:

RouterContainer.set(Router.create({
    routes: Routes,
    location: Router.HistoryLocation
}));