Skip to content

Commit

Permalink
Move HMR stuff into a side note.
Browse files Browse the repository at this point in the history
  • Loading branch information
cjcenizal committed May 9, 2018
1 parent c46ed1c commit 0b4754c
Showing 1 changed file with 24 additions and 8 deletions.
32 changes: 24 additions & 8 deletions wiki/react-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const RouterLinkAdapter = ({to, render}) => {

## react-router 3.x

### Share `router` globally

To enable these techniques, you'll need to make the `router` instance available outside of React's
`context`. One method for doing this is to assign it to a globally-available singleton within your
app's root component.
Expand All @@ -70,13 +72,6 @@ class App extends Component {
this.registerRouter();
}

componentDidUpdate() {
// If using HMR, you'll need to re-register the router after a hot reload. Note that
// you may want to add some conditions here to cull this logic from a production build,
// e.g. `if (process.env.NODE_ENV !== `production` && module.hot)`
this.registerRouter();
}

registerRouter() {
// Expose the router to the app without requiring React or context.
const { router } = this.context;
Expand All @@ -92,6 +87,20 @@ ReactDOM.render(
)
```

### Hot module reloading

Note that if using HMR, you'll need to re-register the router after a hot reload.

```js
componentDidUpdate() {
// You may want to add some conditions here to cull this logic from a production build,
// e.g. `if (process.env.NODE_ENV !== 'production' && module.hot)`
this.registerRouter();
}
```

### `routing.js` helper

You can create a `routing.js` lib to surface the `registerRouter` method as well as your
conversion function (called `getRouterLinkProps` here).

Expand Down Expand Up @@ -132,11 +141,12 @@ export const getRouterLinkProps = to => {

return {href, onClick}
};

```

## react-router 4.x

### Share `router` globally

Setup is slightly different with `react-router` 4.x. To enable these techniques, you'll need to make
the `router` instance available outside of React's `context`. One method for doing this is to assign
it to a globally-available singleton within your app's root component.
Expand Down Expand Up @@ -181,6 +191,12 @@ ReactDOM.render(
)
```

### Hot module reloading

[See above](#hot-module-reloading).

### `routing.js` helper

You can create a `routing.js` lib to surface the `registerRouter` method as well as your
conversion function (called `getRouterLinkProps` here).

Expand Down

0 comments on commit 0b4754c

Please sign in to comment.