Skip to content

Commit 6941694

Browse files
jameslaneconklingtimdorr
authored andcommitted
clarify docs about conditions when withRouter updates (remix-run#5357)
* clarify docs about conditions when withRouter updates * touch up language on withRouter docs
1 parent ce52721 commit 6941694

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

packages/react-router/docs/api/withRouter.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# withRouter
22

3-
You can get access to the [`history`](./history.md) object's properties and the closest [`<Route>`](./Route.md)'s [`match`](./match.md) via the `withRouter` higher-order component. `withRouter` will re-render its component every time the route changes with the same props as [`<Route>`](./Route.md) render props: `{ match, location, history }`.
3+
You can get access to the [`history`](./history.md) object's properties and the closest [`<Route>`](./Route.md)'s [`match`](./match.md) via the `withRouter` higher-order component. `withRouter` will pass updated `match`, `location`, and `history` props to the wrapped component whenever it renders.
44

55
```js
66
import React from 'react'
@@ -31,14 +31,24 @@ const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
3131

3232
#### Important Note
3333

34-
If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpdate`. For example, when using Redux:
34+
`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders. If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpdate`. For example, when using Redux:
3535

3636
```js
3737
// This gets around shouldComponentUpdate
3838
withRouter(connect(...)(MyComponent))
39+
// or
40+
compose(
41+
withRouter,
42+
connect(...)
43+
)(MyComponent)
3944

4045
// This does not
4146
connect(...)(withRouter(MyComponent))
47+
// nor
48+
compose(
49+
connect(...),
50+
withRouter
51+
)(MyComponent)
4252
```
4353

4454
See [this guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md) for more information.
@@ -69,7 +79,7 @@ A function that will be passed as the `ref` prop to the wrapped component.
6979
```js
7080
class Container extends React.Component {
7181
componentDidMount() {
72-
this.component.doSomething()
82+
this.component.doSomething()
7383
}
7484

7585
render() {

0 commit comments

Comments
 (0)