Skip to content

Commit

Permalink
[added] <Redirect/> component
Browse files Browse the repository at this point in the history
closes #159
  • Loading branch information
ryanflorence committed Aug 6, 2014
1 parent c906506 commit 829a9ec
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 0 deletions.
1 change: 1 addition & 0 deletions Redirect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./modules/components/Redirect');
1 change: 1 addition & 0 deletions docs/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ React Router API

- Components
- [`Link`](/docs/api/components/Link.md)
- [`Redirect`](/docs/api/components/Redirect.md)
- [`Route`](/docs/api/components/Route.md)
- [`RouteHandler`](/docs/api/components/RouteHandler.md)
- [`Routes`](/docs/api/components/Routes.md)
Expand Down
47 changes: 47 additions & 0 deletions docs/api/components/Redirect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
API: `Redirect` (component)
===========================

Configures a redirect for a path in your route declarations.

Props
-----

### `from`

The path you want to redirect from, including dynamic segments.

### `to`

The `name` of the route you want to redirect to.

Example
-------

```xml
<!--
lets say we want to change from `/profile/123` to `/about/123`
and redirect `/get-in-touch` to `/contact`
-->
<Routes>
<Route handler={App}>
<Route name="contact" handler={Contact}/>
<Route name="about-user" path="about/:userId" handler={UserProfile}/>
</Route>

<Redirect from="get-in-touch" to="contact" />
<Redirect from="profile/:userId" to="about-user" />
</Routes>
```

Note that the `<Redirect/>` can be placed anywhere in the route
hierarchy, if you'd prefer the redirects to be next to their respective
routes.

```xml
<Routes>
<Route handler={App}>
<Route name="contact" handler={Contact}/>
<Redirect from="get-in-touch" to="contact" />
</Route>
</Routes>
```
2 changes: 2 additions & 0 deletions examples/dynamic-segments/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ var React = require('react');
var Router = require('../../index');
var Route = Router.Route;
var Routes = Router.Routes;
var Redirect = Router.Redirect;
var Link = Router.Link;

var App = React.createClass({
Expand Down Expand Up @@ -50,6 +51,7 @@ var routes = (
<Route handler={App}>
<Route name="user" path="/user/:userId" handler={User}>
<Route name="task" path="/user/:userId/tasks/:taskId" handler={Task}/>
<Redirect from="/user/:userId/todos/:taskId" to="task"/>
</Route>
</Route>
</Routes>
Expand Down
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
exports.ActiveState = require('./ActiveState');
exports.AsyncState = require('./AsyncState');
exports.Link = require('./Link');
exports.Redirect = require('./Redirect');
exports.Route = require('./Route');
exports.Routes = require('./Routes');
exports.goBack = require('./goBack');
Expand Down
25 changes: 25 additions & 0 deletions modules/components/Redirect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
var React = require('react');
var Route = require('./Route');

function Redirect(props) {
return Route({
path: props.from,
handler: createRedirectClass(props.to)
});
}

function createRedirectClass(to) {
return React.createClass({
statics: {
willTransitionTo: function(transition, params, query) {
transition.redirect(to, params, query);
}
},

render: function() {
return null;
}
});
}

module.exports = Redirect;

0 comments on commit 829a9ec

Please sign in to comment.