v0.11.0

The router changed a lot in this release. While you won't have to change too much of your app, you will have to change it in a lot of places. The fundamental change is that you, rather than the router, get to have control of your view instances.

If you find anything is missing from this list, please open an issue and we will get it added here ASAP.

React 0.12

You must upgrade to 0.12.x before you can use version 0.11.x of the
router.

<Routes/> and starting the router

<Routes/> is gone, there is a new API that gives you complete control
of your views.

// 0.10.x
var routes = (
  <Routes location="history">
    <Route handler={App}>
      <Route name="dashboard" handler={Dashboard}/>
    </Route>
  </Routes>
);

React.render(routes, el);

// 0.11.x
var routes = (
  <Route handler={App}>
    <Route name="dashboard" handler={Dashboard}/>
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, el);
});

// or default to hash location
Router.run(routes, function (Handler) {
  React.render(<Handler/>, el);
});

this.props.activeRouteHandler() -> <RouteHandler/>

// 0.10.x
var Something = React.createClass({
  render: function () {
    return (
      <div>
        <this.props.activeRouteHandler />
      </div>
    );
  }
});

// 0.11.x
var RouteHandler = Router.RouteHandler;

var Something = React.createClass({
  render: function () {
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
});

this.props.params and this.props.query

They are no longer available on props, use the State mixin.

// 0.10.x
var Something = React.createClass({
  render: function () {
    var name = this.props.params.name;
    var something = this.props.query.something;
    // ...
  }
});

// 0.11.x

// pass it down the view hierarchy to get the same lifecycle hooks to
// trigger as before
Router.run(routes, function (Handler, state) {
  React.render(<Handler params={state.params} query={state.query} />, el);
  // make sure to `<RouteHandler {...this.props}/>` to continue
  // passing it down the hierarchy
});

// or use the `State` mixin
var Something = React.createClass({
  mixins: [ Router.State ],
  render: function () {
    var name = this.getParams().name;
    var something = this.getQuery().something;
    // ...
  }
});

// Also, if you're using a flux-style app, you can trigger a "transition"
// action in the `run` callback with the params/query in the payload, then
// subscribe in your handlers to the store that grabs the data.

ActiveState -> State, and methods too

This mixin's name has changed, and all of its methods that had the word
active in it, too. For example, getActiveParams() becomes getParams().

// v0.10.x
var Something = React.createClass({
  mixins: [ Router.ActiveState ],
  render: function () {
    var name = this.getActiveParams().name;
    // ...
  }
});

// v0.11.x
var Something = React.createClass({
  mixins: [ Router.State ]
  render: function () {
    var name = this.getParams().name;
    // ...
  }
});

CurrentPath -> State

You can find this.getPath() on the Router.State mixin.

// v0.10.x
var Something = React.createClass({
  mixins: [ Router.CurrentPath ],
  render: function () {
    var path = this.getCurrentPath();
    // ...
  }
});

// v0.11.x
var Something = React.createClass({
  mixins: [ Router.State ],
  render: function () {
    var path = this.getPath();
    // ...
  }
});

Route addHandlerKey prop

This option has been removed, you will need to add handler keys
yourself:

// 0.10.x
<Route handler={App}>
  <Route addHandlerKey={true}/>
</Route>

// 0.11.x
var App = React.createClass({
  mixins: [ Router.State ],

  getHandlerKey: function () {
    // this will all depend on your needs, but here's a typical
    // scenario that's pretty much what the old prop did
    var childDepth = 1; // have to know your depth
    var childName = this.getRoutes()[childDepth].name;
    var id = this.getParams().id;
    var key = childName+id;
    return key;
  },

  render: function () {
    return (
      <div>
        <RouteHandler key={this.getHandlerKey()} />
      </div>
    );
  }
});

<Routes onError={fn}/>

<Routes/> is gone, instead create a router with your error handler as
an option:

// 0.10.x
<Routes onError={fn}>
  // ...
</Routes>

// 0.11.x
var router = Router.create({
  onError: fn,
  // ...
});
router.run(callback);

Router.renderRoutesTo*

These methods have been removed because you, not the router, are in
control of rendering.

// v0.10.x
Router.renderRoutesToString(routes, path, function (html) {
 // do something with `html`
});

// v0.11.x
Router.run(routes, path, function (Handler) {
  var html = React.renderToString(<Handler/>);
});

Route Props Passed to Handlers

In 0.10.x you could add props to your route that would make their way
down to your handlers. While convenient, conflating routes with their
handlers was confusing to a lot of folks.

To get the same effect, you can either create your handlers with a
function and close over the information you need, or simply define those
properties on your handlers.

// 0.10.x
<Route name="users" foo="bar" handler={Something}/>

var Something = React.createClass({
  render () {
    return <div>{this.props.name} {this.props.foo}</div>
  }
});

// 0.11.x

// close over technique
<Route name="users" handler={makeSomething("users", "bar")}/>

function makeSomething(name, foo) {
  return React.createClass({
    render () {
      return <div>{name} {foo}</div>
    }
  });
}

// handler definition technique
<Route name="users" handler={Something}/>

var Something = React.createClass({
  foo: "bar",
  name: "users",
  render () {
    return <div>{this.name} {this.foo}</div>
  }
});

v0.10.2

• 940a0d0 [changed] use Object.assign instead of copyProperties
• f8cb7f9 [changed] use Object.assign instead of merge
• 70b442a [added] React 0.12 compatibility

v0.10.1

• 70b442a [added] React 0.12 compatibility

v0.10.0

Nothing changed, this was simply React 0.12.0 compatibility. Note,
your code needs to use the React 0.11.x API for things to work, there
will be lots of warnings in the console.

Changes

• 70b442a [added] React 0.12 compatibility

v0.9.5

• 6192285 [added] to opt out of scroll behavior for itself and descendants

v0.9.4

• e571c27 [fixed] Add .active class to <Link>s with absolute hrefs
• ea5a380 [fixed] Make sure onChange is fired at synchronous first render
• dee374f [fixed] Listen to path changes caused by initial redirect, fixes #360
• d47d7dd [fixed] potential infinite loop during transitions
• 1b1a62b [added] Server-side rendering
• c7ca87e [added] <Routes onError>

v0.9.3

• caf3a2b [fixed] scrollBehavior='none' on path update

v0.9.2

• d57f830 [changed] Public interface for Location objects
• 6723dc5 [added] ability to set params/query in Redirect
• 60f9eb4 [fixed] encoded ampersands in query params
• 668773c [fixed] transitioning to paths with .

v0.9.1

• 76fe696 [fixed] trailing comma

v0.9.0

ActiveState mixin isActive

isActive is now an instance method.

// 0.7.x
var SomethingActive = React.createClass({
  mixins: [ActiveState],

  render: function () {
    var isActive = SomethingActive.isActive(...);
  }
});

// 0.9.x
var SomethingActive = React.createClass({
  mixins: [ActiveState],

  render: function () {
    var isActive = this.isActive(...);
  }
});

<Routes onActiveStateChange/> -> <Routes onChange />

// 0.7.x
<Routes onActiveStateChange={fn} />

function fn(nextState) {}

// 0.9.x
<Routes onChange={fn} />

function fn() {
  // no arguments
  // `this` is the routes instance
  // here are some useful methods to get at the data you probably need
  this.getCurrentPath();
  this.getActiveRoutes();
  this.getActiveParams();
  this.getActiveQuery();
}

. in params support

. used to be a delimiter like /, but now its a valid character in
your params.

transition.retry()

transition.retry() used to use transitionTo, creating a new history
entry, it now uses replaceWith.

// 0.7.x
React.createClass({
  login: function () {
    // ...
    transition.retry();
  }
});

// 0.9.x
React.createClass({
  mixins: [Navigation],
  login: function () {
    // ...
    this.transitionTo(transition.path);
  }
});

Returning promises from transition hooks

Transition hooks are now sync, unless you opt-in to async with
transition.wait(promise).

// 0.7.x
React.createClass({
  statics: {
    willTransitionTo: function (transition) {
      return somePromise();
    }
  }
});

// 0.9.x
React.createClass({
  statics: {
    willTransitionTo: function (transition) {
      transition.wait(somePromise());
    }
  }
});

preserveScrollPosition -> scrollBehavior

preserveScrollPosition was totally broken and should have been named
perverseScrollPosition.

There are now three scroll behaviors you can use:

• 'browser'
• 'scrollToTop'
• 'none'

browser is the default, and imitates what browsers do in a typical
page reload scenario (preserves scroll positions when using the back
button, scrolls up when you come to a new page, etc.) Also, you can no
longer specify scroll behavior per <Route/> anymore, only <Routes/>

<Routes scrollBehavior="scrollToTop"/>

RouteStore

This was not a public module, but we know some people were using it.
It's gone now. We have made getting at the current routes incredibly
convenient now with additions to the ActiveState mixin.

Router.transitionTo, replaceWith, goBack

These methods have been moved to mixins.

var Router = require('react-router');

// 0.7.x
React.createClass({
  whenever: function () {
    Router.transitionTo('something');
    Router.replaceWith('something');
    Router.goBack();
  }
});

// 0.9.x
var Navigation = Router.Navigation;

React.createClass({
  mixins: [Navigation],
  whenever: function () {
    this.transitionTo('something');
    this.replaceWith('something');
    this.goBack();
  }
});

<Routes onTransitionError onAbortedTransition/>

These were removed, there is no upgrade path in 0.9.0 but we will have
something soon. These weren't intended to be used.

ActiveState lifecycle method updateActiveState removed

We didn't actually need this. Just use this.isActive(to, params, query).

AsyncState mixin removed

There is no upgrade path. Just use comoponentDidMount to request
state. This was some groundwork for server-side rendering but we are
going a different direction now (using props passed in to route
handlers) so we've removed it.

Changes

• 5aae2a8 [added] onChange event to Routes
• ba65269 [removed] AsyncState
• 4d8c7a1 [removed] <Routes onTransitionError>
• 4d8c7a1 [removed] <Routes onAbortedTransition>
• ed0cf62 [added] Navigation mixin for components that need to modify the URL
• ed0cf62 [added] CurrentPath mixin for components that need to know the current URL path
• ed0cf62 [added] getActiveRoutes, getActiveParams, and getActiveQuery methods to ActiveState mixin
• ed0cf62 [removed] Awkward updateActiveState callback from ActiveState mixin
• ed0cf62 [removed] Router.PathState (use Router.CurrentPath instead)
• ed0cf62 [removed] Router.Transitions (use Router.Navigation instead)
• ed0cf62 [removed] Router.RouteLookup (because it was useless)
• ed0cf62 [added] <Routes scrollBehavior="browser"> alias of "imitateBrowser"
• ed0cf62 [changed] <Routes fixedPath> => <Routes initialPath> will be useful for SSR