Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,44 +171,58 @@ It also provides a `router` object on [context](https://facebook.github.io/react

Contains data and methods relevant to routing. Most useful for imperatively transitioning around the application.

To use it, you must signal to React that you need it by declaring your use of it in your component:
To use it, you must signal to React that you need it by declaring your use of it in your component via `contextTypes`:

```js
var MyComponent = React.createClass({
contextTypes: {
router: Router.PropTypes.router
router: routerShape.isRequired
},

render: function() {
// here, you can use `this.context.router`
// Here, you can use this.context.router.
}
});
})
```

To use `context.router` on a component declared as an ES2015 class, define `contextTypes` as a static property of the class:

```js
class MyComponent extends React.Component {
render() {
// Here, you can use this.context.router.
}
}

MyComponent.contextTypes = {
router: routerShape.isRequired
}
```

Using `context.router` in combination with ES6 classes requires a different pattern (note the use of the `static` keyword):
If you are using the class properties proposal, you can instead write:

```js
class MyComponent extends React.Component {
static contextTypes = {
router: Router.PropTypes.router
router: routerShape.isRequired
}

render: function() {
// here, you can use `this.context.router`
render() {
// Here, you can use this.context.router.
}
});

}
```

Finally, you can use `context.router` with
[stateless function components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions):
To use `context.router` with
[stateless function components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions), declare `contextTypes` as a static property of the component function:

```js
function MyComponent(props, context) {
// here, you can use `context.router`
// Here, you can use context.router.
}

MyComponent.contextTypes = {
router: Router.PropTypes.router
router: routerShape.isRequired
}
```

Expand Down