Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expanded API docs for context.router #3346

Merged
merged 2 commits into from
Apr 18, 2016
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
43 changes: 42 additions & 1 deletion docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,12 +165,53 @@ An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the
### `<RouterContext>`
A `<RouterContext>` renders the component tree for a given router state. Its used by `<Router>` but also useful for server rendering and integrating in brownfield development.

It also provides a `router` object on `context`.
It also provides a `router` object on [context](https://facebook.github.io/react/docs/context.html).

#### `context.router`

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:

```js
var MyComponent = React.createClass({
contextTypes: {
router: Router.PropTypes.router
},
render: function() {
// here, you can use `this.context.router`
}
});

```

Using `context.router` in combination with ES6 classes requires a different pattern (note the use of the `static` keyword):

```js
class MyComponent extends React.Component {
static contextTypes = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't part of ES6.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you talking about the static keyword?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah; I'll update this part, just waiting to see where we got with #3349.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's just a proposal right now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I forgot about that. Babel makes using more experimental features very easy :)

router: Router.PropTypes.router
}

render: function() {
// 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):

```js
function MyComponent(props, context) {
// here, you can use `context.router`
}
MyComponent.contextTypes = {
router: Router.PropTypes.router
}
```

##### `push(pathOrLoc)`
Transitions to a new URL, adding a new entry in the browser history.

Expand Down