Skip to content

Commit

Permalink
Improve route prefetch docs: add client side imperative code (#4213)
Browse files Browse the repository at this point in the history
I stumbled into this Issue #2868 and thought it should be mentioned properly in the documentation.
  • Loading branch information
rwieruch authored and timneutkens committed May 25, 2018
1 parent 8c6a4eb commit 2c3e8d3
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -720,6 +720,29 @@ export default ({ url }) =>
</div>
```

The router instance should be only used inside the client side of your app though. In order to prevent any error regarding this subject, when rendering the Router on the server side, use the imperatively prefetch method in the `componentDidMount()` lifecycle method.

```jsx
import React from 'react'
import Router from 'next/router'

export default class MyLink extends React.Component {
componentDidMount() {
Router.prefetch('/dynamic')
}

render() {
return (
<div>
<a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
A route transition will happen after 100ms
</a>
</div>
)
}
}
```

### Custom server and routing

<p><details>
Expand Down

0 comments on commit 2c3e8d3

Please sign in to comment.