跳到内容
文档错误`url` 已弃用

`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