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

v0.8.0

Please don't upgrade to 0.8.0, just skip to 0.9.x.

0.8.0 had some transient mixins we didn't intend to document, but had
some miscommunication :( If you were one of three people who used some
of these mixins and need help upgrading from 0.8.0 -> 0.9.x find us on
freenode in #rackt or open a ticket. Thanks!

Changes

• d2aa7cb [added] <Routes location="none">
• 637c0ac [added] <Routes fixedPath>
• f2bf4bd [removed] RouteStore
• f2bf4bd [added] Router.PathState for keeping track of the current URL path
• f2bf4bd [added] Router.RouteLookup for looking up routes
• f2bf4bd [added] Router.Transitions for transitioning to other routes
• f2bf4bd [added] Pluggable scroll behaviors
• f2bf4bd [changed] <Routes preserveScrollPosition> => <Routes scrollBehavior>
• f2bf4bd [removed] <Route preserveScrollPosition>
• f2bf4bd [removed] Router.transitionTo, Router.replaceWith, Router.goBack
• 97dbf2d [added] transition.wait(promise)
• 3787179 [changed] Transition retry now uses replaceWith.
• e0b708f [added] Ability to transitionTo absolute URLs
• c1493b5 [changed] #259 support dots in named params
• a4ce7c8 [changed] isActive is an instance method
• a4ce7c8 [removed] <Routes onActiveStateChange>

v0.7.0

The package root modules were removed. Please import modules from the
Router default export.

// 0.6.x
var Link = require('react-router/Link');

// 0.7.x
var Router = require('react-router');
var Link = Router.Link;

Changes

• 3796371 [changed] Use Browserify to run specs
• 0e649be [changed] Use Browserify to build examples
• bb7b666 [removed] .js files from repo root
• 96122dd [fixed] undefined Buffer in query strings

v0.6.1

• 7536d96 [fixed] warning on links w/o params

v0.6.0

Path Matching

Paths that start with / are absolute and work exactly as they used to.
Paths that don't start with / are now relative, meaning they extend
their parent route.

Simply add / in front of all your paths to keep things working.

<!-- 0.5.x -->
<Route path="/foo">
  <Route path="bar"/>
</Route>

<!-- 0.6.x -->
<Route path="/foo">
  <Route path="/bar"/>
</Route>

Though, you may want to embrace this new feature:

<!-- 0.5.x -->
<Route path="/course/:courseId">
  <Route path="/course/:courseId/assignments"/>
  <Route path="/course/:courseId/announcements"/>
</Route>

<!-- 0.6.x -->
<Route path="/course/:courseId">
  <Route path="assignments"/>
  <Route path="announcements"/>
</Route>

Also . is no longer matched in dynamic segments.

<!-- 0.5.x -->
<Route path="/file/:filename" />

<!-- 0.6.x -->
<Route path="/file/:filename.?:ext?" />

<!--
  or for a looser match to allow for multiple `.` note that the data
  will be available on `this.props.params.splat` instead of
  `this.props.params.filename`
-->
<Route path="/file/*" />

Link params

Links should now pass their params in the params property, though the
old behavior will still work, you should update your code soon because
it will be removed by v1.0

// 0.5.x
<Link to="user" userId="123"/>

// 0.6.x
<Link to="user" params={{userId: "123"}}/>

Dynamic Segments, keys, and lifecycle methods

If you have dynamic segments and are depending on getInitialState,
componentWillMount, or componentDidMount to fire between transitions
to the same route--like users/123 and users/456--then you have two
options:

• add addHandlerKey={true} to your route and keep the previous
  behavior (but lose out on performance), or
• implement componentWillReceiveProps.

// 0.5.x
<Route handler={User} path="/user/:userId"/>

// 0.6.x
<Route handler={User} path="/user/:userId" addHandlerKey={true} />

// 0.5.x
var User = React.createClass({
  getInitialState: function () {
    return {
      user: getUser(this.props.params.userId);
    }
  }
});

// 0.6.x
var User = React.createClass({
  getInitialState: function () {
    return this.getState();
  },

  componentWillReceiveProps: function (newProps) {
    this.setState(this.getState(newProps));
  },

  getState: function (props) {
    props = props || this.props;
    return {
      user: getUser(props.params.userId)
    };
  }
});

Changes

• 2a75f3e [added] query argument to willTransitionTo
• b7e21bb [fixed] Window scrolling
• 5864531 [changed] Default <Redirect from> to *
• 1064881 [changed] paths to inherit parents
• 79caf99 [added] <DefaultRoute name>
• 25adcab [fixed] Using HashLocation without a preceeding /
• a63c940 [added] <NotFoundRoute>
• d5bd656 [changed] path matching algorithm
• 6526e70 [removed] location="disabled"
• 8d2f3ed [changed] <Link/>s to take params property
• 2a85b74 [changed] handler keys to be optional

v0.5.3

• 273625a [fixed] Active state on <Link>s with key prop
• 283d3f6 [added] RouteStore#registerChildren
• a030648 [changed] Relaxed MemoryStore invariant
• e028768 [added] <DefaultRoute> component
• 6878120 [added] onAbortedTransition, onActiveStateChange, onTransitionError Routes props
• 58073ca [changed] Transition#cancelReason => abortReason
• 6d1ae95 [fixed] sibling array route configs
• 0e7a182 [added] pluggable history implementations closes #166
• ca96f86 [fixed] typo in Link
• f3dc513 [added] onClick handler to <Link />
• b9f92f9 [changed] updated rf-changelog

v0.5.2

• 21f4f57 [added] preserveScrollPosition Route/Routes props
• f3b4de8 [added] support for extra props in Links, fixes #170
• 829a9ec [added] <Redirect/> component
• 0a49665 [added] Router.makeHref
• 2100b8c [changed] handlers receive route name
• 154afba [changed] location of public modules

v0.5.1

• 08f5a69 [fixed] location="history" fallback
• 87b1c2a [fixed] Navigation to root URL can fail
• 760f021 [fixed] infinite loop in RouteStore.unregisterRoute
• 5fea685 [added] Router.AsyncState mixin
• 395a590 [changed] fallback to window.location for history
• 2a3582e [changed] make URLStore.push idempotent
• 4c4f87b [fixed] alt click on Link should count as modified
• 97c02f1 [fixed] middle click on <Link/>

v0.5.0

We brought back <Routes/>.

// 0.4.x
var routes = (
  <Route handler={App} location="history">
    <Route name="about" handler="about"/>
  </Route>
);

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

Changes

• 5af49d4 [changed] Split <Routes> component from <Route>

v0.4.2

• 2fc9976 [fixed] eslint cleanup; trailing comma fix for IE
• b8018b1 [added] animation example