跳到内容
文档错误`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`