Next.js: 'url' property is deprecated - question

[mandriv]

I am using withRouter HoC as described in this snippet, however, I am still getting the error:

 utils.js:26 Warning: the 'url' property is deprecated. https://err.sh/next.js/url-deprecated

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Code executes without the deprecation warning.

Current Behavior

The error mentioned above appears.

Steps to Reproduce (for bugs)

1. Import withRouter to your component
2. Refer any field from this.props.router
3. Export your component wrapped in withRouter HoC
4. When component is rendered, the deprecation error appears in console

Context

I am implementing Navigation component that is aware of the current route (to highlight the NavItem).

Your Environment

| Tech | Version |
|-------|-------|
| next | 6.0.0 |
| node | 9.11.1 |
| OS | OSX 10.13.4 |
| browser | Chrome Version 66.0.3359.139 |

[hugotox]

I do not have a custom App component and I still get the warning. I do have a custom _document with the contents described here https://github.com/zeit/next.js#custom-document
Any ideas how to get rid of that warning?

[timneutkens]

I'd like to investigate this further.

[roopemerikukka]

I think this should be told in the readme because now it just states that "Each top-level component receives a url property..."

Maybe there should be a note of the special case when using custom App component?

[hopperhuang]

continously focus on this issue

[ryanfitzer]

One of my child components triggers the warning with JSON.stringify( this.props ).

[olivarity]

I'm using a pretty standard configuration (no custom App, no attempt to ever reference url) and I get this warning. I don't think we should be forced into using a custom _app.js just to get rid of this.

[timneutkens]

@remy mentioned it's possible that React devtools triggers the url property read that causes the warning to show

[olivarity]

@timneutkens Yep, that appears to be the issue in my setup. Should we update the error docs to reflect this?

[timneutkens]

I've removed the suggestions in this thread saying you should create a custom _app.js that passes in the url property globally, as the reason we removed it is to be more explicit and not pass in url as a property, but instead you can inject the router using withRouter() as per the deprecation. We will provide a codemod soon to update url in pages to the withRouter() implementation automatically.

[timneutkens]

I just open sourced the codemod we used to upgrade 35K+ lines of code from url to withRouter:

https://github.com/zeit/next-codemod#url-to-withrouter

@scaasic regarding documenting the React devtools property read, sure feel free to send a pull request. We always welcome documentation improvements 😌

[timneutkens]

After re-visiting this issue it seems like there's nothing wrong. Only React Devtools making it log out the warning, unfortunately, we can't get around that. @scaasic has created a pull request that adds a message saying react devtools can cause the warning to show up.

[andrewkusuma]

After re-visiting this issue it seems like there's nothing wrong. Only React Devtools making it log out the warning, unfortunately, we can't get around that. @scaasic has created a pull request that adds a message saying react devtools can cause the warning to show up.

after tried next from /learn getting started I encountered this problem and when I disable/ turn off devtools no warning message. Is this still no update to fix this warning?

[Sergioamjr]

I was getting this warning message when I accessed the property query in this.props.url, in some page with query param url, like post?id=22, even by console when I printed this.props.

I got fix it using withRouter from next/router and accessing query from this.props.router.

import { withRouter } from "next/router";

class Single extends Component {
  componentDidMount = () => {
    const { router: { query: { id } }} = this.props;
    console.log(id);
  };
}

export default withRouter(Single);