archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix shallow routing examples using old React lifecycle and deprecated props.url (#4950)

Browse source 
* replace componentWillReceiveProps by componentDidUpdate

* replace props.url by withRouter HOC

* fix deprecated `props.url` in with-shallow-routing example
This commit is contained in:
Luc 2018-08-13 20:09:45 +02:00 committed by Tim Neutkens
parent 4d8e9cacdd
commit b516d094a4
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/with-shallow-routing/pages/index.js
View file

@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import Router from 'next/router' import Router, { withRouter } from 'next/router'
import { format } from 'url' import { format } from 'url'
let counter = 1 let counter = 1
export default class Index extends React.Component { class Index extends React.Component {
static getInitialProps ({ res }) { static getInitialProps ({ res }) {
if (res) { if (res) {
return { initialPropsCounter: 1 } return { initialPropsCounter: 1 }
@ -23,24 +23,35 @@ export default class Index extends React.Component {
} }
incrementStateCounter () { incrementStateCounter () {
const { url } = this.props const { router } = this.props
const currentCounter = url.query.counter ? parseInt(url.query.counter) : 0 const currentCounter = router.query.counter
? parseInt(router.query.counter)
: 0
const href = `/?counter=${currentCounter + 1}` const href = `/?counter=${currentCounter + 1}`
Router.push(href, href, { shallow: true }) Router.push(href, href, { shallow: true })
} }
render () { render () {
const { initialPropsCounter, url } = this.props const { initialPropsCounter, router } = this.props
return ( return (
<div> <div>
<h2>This is the Home Page</h2> <h2>This is the Home Page</h2>
<Link href='/about'><a>About</a></Link> <Link href='/about'>
<a>About</a>
</Link>
<button onClick={() => this.reload()}>Reload</button> <button onClick={() => this.reload()}>Reload</button>
<button onClick={() => this.incrementStateCounter()}>Change State Counter</button> <button onClick={() => this.incrementStateCounter()}>
Change State Counter
</button>
<p>"getInitialProps" ran for "{initialPropsCounter}" times.</p> <p>"getInitialProps" ran for "{initialPropsCounter}" times.</p>
<p>Counter: "{url.query.counter || 0}".</p> <p>
Counter: "{router.query.counter || 0}
".
</p>
</div> </div>
) )
} }
} }
export default withRouter(Index)

13
readme.md
View file

@ -600,14 +600,17 @@ const as = href
Router.push(href, as, { shallow: true }) Router.push(href, as, { shallow: true })
``` ```
Now, the URL is updated to `/?counter=10`. You can see the updated URL with `this.props.url` inside the `Component`. Now, the URL is updated to `/?counter=10`. You can see the updated URL with `this.props.router.query` inside the `Component` (make sure you are using [`withRouter`](#using-a-higher-order-component) around your `Component` to inject the `router` prop).
You can watch for URL changes via [`componentWillReceiveProps`](https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops) hook as shown below: You can watch for URL changes via [`componentDidUpdate`](https://reactjs.org/docs/react-component.html#componentdidupdate) hook as shown below:
```js ```js
componentWillReceiveProps(nextProps) { componentDidUpdate(prevProps) {
const { pathname, query } = nextProps.url const { pathname, query } = this.props.router
// fetch data based on the new query // verify props have changed to avoid an infinite loop
if (query.id !== prevProps.router.query.id) {
// fetch data based on the new query
}
} }
``` ```