Skip to content

Commit

Permalink
Merge pull request #3236 from taion/update-troubleshooting
Browse files Browse the repository at this point in the history
Update troubleshooting guide
  • Loading branch information
taion committed Apr 1, 2016
2 parents 49d5bff + 348947e commit 1267766
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 11 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ React Router keeps your UI in sync with the URL. It has a simple API with powerf

### Docs & Help

- [Tutorial - Do This First!](https://github.com/reactjs/react-router-tutorial)
- [Guides and API Docs](https://github.com/reactjs/react-router/tree/master/docs)
- [Change Log](/CHANGES.md)
- [Tutorial – do this first!](https://github.com/reactjs/react-router-tutorial)
- [Guides and API docs](https://github.com/reactjs/react-router/tree/master/docs)
- [Troubleshooting guide](https://github.com/reactjs/react-router/blob/master/docs/Troubleshooting.md)
- [Changelog](/CHANGES.md)
- [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router)
- [Codepen Boilerplate](http://codepen.io/anon/pen/xwQZdy?editors=001)
- [CodePen boilerplate](http://codepen.io/anon/pen/xwQZdy?editors=001)
Please use for bug reports

**Older Versions:**
Expand Down
38 changes: 32 additions & 6 deletions docs/Troubleshooting.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
# Troubleshooting

### `this.context.router` is `undefined`
You will need to add the router context type to your component so the router will be available to you.

You need to add `router` to your component's `contextTypes` to make the router object available to you.

```js
contextTypes: {
router: React.PropTypes.func.isRequired
router: React.PropTypes.object.isRequired
}
```

### How to get previous path?

### Getting the previous location

```js
<Route component={App}>
Expand All @@ -28,19 +31,42 @@ const App = React.createClass({
```

### Component won't render
Route matching happens in the order they are defined (think `if/elseif` statement). In this case, `/about/me` will show the `UserPage` component because `/about/me` matches the first route. You need to reorder your routes if this happens.
`About` will never be reachable:

Route matching happens in the order they are defined (think `if/elseif` statement). In this case, `/about/me` will show the `<UserPage>` component because `/about/me` matches the first route. You need to reorder your routes if this happens. `<About>` will never be reachable:

```js
<Router>
<Route path="/:userName/:id" component={UserPage}/>
<Route path="/about/me" component={About}/>
</Router>
```

`About` is now be reachable:
`About` is now reachable:

```js
<Router>
<Route path="/about/me" component={About}/>
<Route path="/:userName/:id" component={UserPage}/>
</Router>
```


### "Required prop was not specified" on route components

You might see this if you are using `React.cloneElement` to inject props into route components from their parents. If you see this, remove `isRequired` from `propTypes` for those props. This happens because React validates `propTypes` when the element is created rather than when it is mounted. For more details, see [facebook/react#4494](https://github.com/facebook/react/issues/4494#issuecomment-125068868).

You should generally attempt to use this pattern as sparingly as possible. In general, it's best practice to minimize data dependencies between route components.


### `<noscript>` with server-side rendering and async routes

Use `match({ history, routes })` on the client side. See [the server rendering guide](guides/ServerRendering.md#async-routes).


### Passing additional values into route components

There are multiple ways to do this depending on what you want to do. You can:

- Define additional values on `<Route>` or the plain route. This will make those values available on `this.props.route` on route components.
- Pass in a `createElement` handler to `<Router>` or `<RouterContext>`. This will allow you to inject additional props into route elements at creation time.
- Define a top-level component above `<Router>` or `<RouterContext>` that exports additional values via `getChildContext`, then access them via context from rendered components.
2 changes: 1 addition & 1 deletion docs/guides/ServerRendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ match({ history, routes }, (error, redirectLocation, renderProps) => {
})
```

## History singletons
## History Singletons

Because the server has no DOM available, the history singletons (`browserHistory` and `hashHistory`) do not function on the server. Instead, they will simply return `undefined`.

Expand Down

0 comments on commit 1267766

Please sign in to comment.