1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/lib/app.js
Arunoda Susiripala f8f3fa7dce Introducing Shallow Routing (#1357)
* Simplify route info handling.

* Add basic resolve=false support.

* Make sure to render getInitialProps always if it's the first render.

* Change resolve=false to shallow routing.

* Add test cases for shallow routing.

* Update README for shallow routing docs.

* Update docs.

* Update docs.

* Update docs.
2017-03-06 08:48:35 -08:00

71 lines
1.7 KiB
JavaScript

import React, { Component, PropTypes } from 'react'
import { AppContainer } from 'react-hot-loader'
import shallowEquals from './shallow-equals'
const ErrorDebug = process.env.NODE_ENV === 'production'
? null : require('./error-debug').default
export default class App extends Component {
static childContextTypes = {
headManager: PropTypes.object
}
getChildContext () {
const { headManager } = this.props
return { headManager }
}
render () {
const { Component, props, hash, err, router } = this.props
const url = createUrl(router)
const containerProps = { Component, props, hash, router, url }
return <div>
<Container {...containerProps} />
{ErrorDebug && err ? <ErrorDebug error={err} /> : null}
</div>
}
}
class Container extends Component {
componentDidMount () {
this.scrollToHash()
}
componentDidUpdate () {
this.scrollToHash()
}
scrollToHash () {
const { hash } = this.props
const el = document.getElementById(hash)
if (el) {
// If we call scrollIntoView() in here without a setTimeout
// it won't scroll properly.
setTimeout(() => el.scrollIntoView(), 0)
}
}
shouldComponentUpdate (nextProps) {
// need this check not to rerender component which has already thrown an error
return !shallowEquals(this.props, nextProps)
}
render () {
const { Component, props, url } = this.props
// includes AppContainer which bypasses shouldComponentUpdate method
// https://github.com/gaearon/react-hot-loader/issues/442
return <AppContainer errorReporter={ErrorDebug}>
<Component {...props} url={url} />
</AppContainer>
}
}
function createUrl (router) {
return {
query: router.query,
pathname: router.pathname
}
}