`url` 已弃用
为什么会出现此错误
在 6.x 之前的版本中,`url` 属性会被神奇地注入到每个 `Page` 组件中(`pages` 目录下的每个页面)。
这个属性被移除的原因是我们希望使事情变得非常可预测和明确。凭空出现一个神奇的 url 属性不利于实现这个目标。
注意:⚠️ 在某些情况下,即使你的代码中没有引用 `url`,使用 React Dev Tools 也可能会触发此警告。尝试暂时禁用该扩展,看看警告是否仍然存在。
可能的修复方法
从 Next 5 开始,我们提供了一种将 Next.js 路由器对象显式注入到页面及其所有后代组件的方法。注入的 `router` 属性将包含与 `url` 相同的值,例如 `pathname`、`asPath` 和 `query`。
这是一个使用 `withRouter` 的示例
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)
我们提供了一个 codemod(代码到代码的转换)来自动将 `url` 属性的用法更改为 `withRouter`。
你可以在这里找到这个 codemod 以及如何运行它的说明:使用 withRouter
这有帮助吗?