_app.js (top component) is no receiving the url property
export default class MyApp extends App {
static async getInitialProps ({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return {pageProps}
}
render () {
const {Component, pageProps} = this.props
return <Container>
<Component {...pageProps} />
</Container>
}
}
As stated in the documentation and also as happening without an _app.js:
Each top-level component receives a url property with the following API:
pathname - String of the current path excluding the query string
query - Object with the parsed query string. Defaults to {}
asPath - String of the actual path (including the query) shows in the browser
push(url, as=url) - performs a pushState call with the given url
replace(url, as=url) - performs a replaceState call with the given url
This is not a bug. Hence Deprecated, usewithRouterinstead in the docs.
_app.js is not a top-level page though. It's a special wrapper, just like _document.js. _app.js is responsible for passing through the url property, so when you create a custom one you have to manually handle that. But since it's deprecated we decided against documenting this, as you should use withRouter to get the route properties inside pages.
I'm actually thinking of removing it from the docs altogether now.
Most helpful comment
This is not a bug. Hence
Deprecated, usewithRouterinsteadin the docs._app.js is not a top-level page though. It's a special wrapper, just like _document.js. _app.js is responsible for passing through the
urlproperty, so when you create a custom one you have to manually handle that. But since it's deprecated we decided against documenting this, as you should usewithRouterto get the route properties inside pages.I'm actually thinking of removing it from the docs altogether now.