mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
5d972b5986
## Summary Delete an incorrect link and update a right link. ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide --------- Co-authored-by: JJ Kasper <[email protected]>
37 lines
1.4 KiB
Plaintext
37 lines
1.4 KiB
Plaintext
---
|
|
title: '`url` is deprecated'
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
In versions prior to 6.x the `url` property got magically injected into every `Page` component (every page inside the `pages` directory).
|
|
|
|
The reason this is going away is that we want to make things very predictable and explicit. Having a magical url property coming out of nowhere doesn't aid that goal.
|
|
|
|
> ⚠️ In some cases using React Dev Tools may trigger this warning even if you do not reference `url` anywhere in your code. Try temporarily disabling the extension and see if the warning persists.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
Since Next 5 we provide a way to explicitly inject the Next.js router object into pages and all their descending components.
|
|
The `router` property that is injected will hold the same values as `url`, like `pathname`, `asPath`, and `query`.
|
|
|
|
Here's an example of using `withRouter`:
|
|
|
|
```js filename="pages/index.js"
|
|
import { withRouter } from 'next/router'
|
|
|
|
class Page extends React.Component {
|
|
render() {
|
|
const { router } = this.props
|
|
console.log(router)
|
|
return <div>{router.pathname}</div>
|
|
}
|
|
}
|
|
|
|
export default withRouter(Page)
|
|
```
|
|
|
|
We provide a codemod (a code to code transformation) to automatically change the `url` property usages to `withRouter`.
|
|
|
|
You can find this codemod and instructions on how to run it here: [Use `withRouter`](/docs/pages/building-your-application/upgrading/codemods#url-to-withrouter)
|