Releases: remix-run/react-router
Releases · remix-run/react-router
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
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>