Javascript 警告：请使用“导入{NavLink}from”；“反应路由器dom”`

我得到了这个错误：

index.js:1437警告：请使用“react router dom”中的“import{NavLink}”，而不是“react router dom/es/undefined”中的“import NavLink”。对后者的支持将在下一个主要版本中删除。

我最近将react router和react router dom的版本从版本

^4.3.1

更新为版本

^5.1.2

。更新这些包后的第一个错误是：

您不应在外部使用

。 搜索之后，我通过以下方式解决了该错误：

import React，{Component}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
从“react Loadable”导入可加载
从“reactstrap”导入{Container}
从“../../components/Loading”导入加载
const Example=Loadable（{loader:（）=>import（'../Example/index.js'），loading:loading}）
导出默认类应用程序扩展组件{
render（）{
返回(
)
}
} 

我在控制台中看到的下一个错误在我用谷歌搜索时没有产生任何搜索结果。它是：

index.js:1437警告：请使用“react router dom”中的“import{NavLink}”，而不是“react router dom/es/undefined”中的“import NavLink”。对后者的支持将在下一个主要版本中删除。

对于各种

react-router-dom

相关组件，例如

NavLink

、

Prompt

，以及我在应用程序中没有使用的其他组件，我多次看到此错误

我升级包的原因是因为我想使用一些新功能，比如useParams钩子

---

我的问题：在我的项目中，解决错误并能够使用最新版本的

react router dom

的最佳方法是什么？

事实证明，浏览react router和react router dom的代码都会产生一些有趣的结果：

打印该行的原因似乎是因为模块已弃用：

react-router-dom]$ cat NavLink.js

"use strict";
require("./warnAboutDeprecatedCJSRequire")("NavLink");
module.exports = require("./index.js").NavLink;

发生这种情况是因为这些是转发的模块；实际打印错误的模块实际上是react router，而不是react router dom：

警告关于预定的ESM导入：

cat react-router/es/warnAboutDeprecatedESMImport.js
"use strict";

// ...

export default function(member) {
  printWarning(
    'Please use `import { %s } from "react-router"` instead of `import %s from "react-router/es/%s"`. ' +
      "Support for the latter will be removed in the next major release.",
    [member, member]
  );
}

因此，即使您没有直接导入模块，您还是导入了模块 可以说，从导入模块的模块

根据他们的代码，react应用程序dom可能移动了开关：

react router/es/Switch.js：

    1 "use strict";
    2
    3 import warnAboutDeprecatedESMImport from "./warnAboutDeprecatedESMImport.js";
    4 warnAboutDeprecatedESMImport("Switch");
    5
    6 import { Switch } from "../esm/react-router.js";
    7 export default Switch;

根据他们的文档，他们提到有两种加载react路由器dom的方式，一种是CommonJS方式，另一种是ES（ES6？）方式，它们指的是运行代码的不同方式（似乎还有UMD）

抄袭自：

这已经在他们的网站上了

这意味着您的代码可能正在CommonJS或ES6上运行。 如果您能够确定运行的是哪种模式，就可以从上面选择正确的导入语句

这里似乎记录了运行代码的旧方法： 从“react router dom”导入{BrowserRouter，Route，Switch}

我在这里找到的关于使用交换机、路由和这些组件的唯一文档，因此我假设您遇到了相同的代码：

有趣的是，当你按照页面上的步骤进行操作时，一切都像一个符咒，所以我认为问题可能是你的“新组件”或依赖项与“旧”（2016？）依赖项混合在一起，因此，这导致了问题，解决方案可能是升级更多的组件，而不是选择性地升级组件（我假设您正在这样做）

考虑以下步骤：

1. create a new app (in another folder) using create-react-app
2. diff your current package.json vs the newly created package.json
3. figure out which are the differences
4. upgrade additional modules (some times deleting the whole node_modules helps).
5. rebuild and re-test.

可能您有一个旧的react路由器和一个新的react路由器dom或类似的不兼容组合，其中一个使用CommonJS，但另一个需要ES模块idk

我希望这些信息有用

也许从package.json中删除“^”也会有所帮助，因为它更明确地说明了版本（如所示）：

"

请尝试新的安装。有一个版本（4.4）导致了许多问题；该版本未发布并重新发布为React Router v5.0.0。警告消息来自4.4/5，但如果您使用的是4.3.1，则不应看到它

如何修复它：

yarn list v1.15.2

warning Filtering by arguments is deprecated. Please use the pattern option instead.

├─ react-router-dom@4.3.1

│ └─ react-router@4.4.0 // it need to be 4.3.1

└─ react-router@4.3.1
Done in 0.98s.

---

可能是来自

reactstrap

？非常感谢您抽出时间回答我的问题。我会尝试您的建议并回复您！没什么大不了的，我很乐意帮助您！

yarn list v1.15.2

warning Filtering by arguments is deprecated. Please use the pattern option instead.

├─ react-router-dom@4.3.1

│ └─ react-router@4.4.0 // it need to be 4.3.1

└─ react-router@4.3.1
Done in 0.98s.