警告：请使用 `import { NavLink } from "react-router-dom"`

Question

我收到此错误：

index.js:1437 Warning: Please use `import { NavLink } from "react-router-dom"` instead of `import NavLink from "react-router-dom/es/undefined"`. Support for the latter will be removed in the next major release.

我最近将我的 react-router 和 react-router-dom 版本从^4.3.1到了^5.1.2版本。 更新这些包后的第一个错误是：

You should not use <Switch> outside a <Router> 。 搜索后，我通过以下方式解决了该错误：

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"

import Loadable from 'react-loadable'

import { Container } from 'reactstrap'
import Loading from "../../components/loading"

const Example = Loadable({ loader: () => import('../example/index.js'), loading: Loading })


export default class App extends Component {
  render() {
    return (
      <Router>
        <Container>
          <Header/>
          <main>
            <Switch>
             <Route exact path="/example/:exampleName/example1/:exampleName" component={Example}/>
            </Switch>
          </main>
        </Container>
      </Router>
    )
  }
} 

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

index.js:1437 Warning: Please use `import { NavLink } from "react-router-dom"` instead of `import NavLink from "react-router-dom/es/undefined"`. Support for the latter will be removed in the next major release.

对于各种react-router-dom相关组件（例如NavLink 、 Prompt以及我什至没有在应用程序中使用的其他内容），我多次看到此错误。

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

我的问题：解决错误并能够在我的项目中使用最新版本的react-router-dom的最佳方法是什么？

Answer 1

事实证明，浏览 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：

警告关于已弃用的 ESMI 导入：

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-app-dom 可能已经移动了 Switch：

反应路由器/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-router-dom 的方式，一种是 CommonJS 方式，另一种是 ES（ES6？）方式，这些是指运行代码的不同方式（也出现了成为 UMD）。

复制自： https : //www.npmjs.com/package/react-router-dom

// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";

// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

这已经在他们的网站上。

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

运行代码的旧方法似乎记录在这里： import { BrowserRouter, Route, Switch } from 'react-router-dom';

我找到的关于使用 Switch、Route 和这些组件的唯一文档在这里，所以我假设您遇到了相同的代码：

https://reacttraining.com/react-router/web/api/BrowserRouter

有趣的是，当人们按照该页面上的步骤进行操作时，一切都像一种魅力结果，这是导致问题的原因，解决方案可能是升级更多组件，而不是有选择地升级组件（我假设您正在这样做）。

考虑以下步骤：

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-router 和一个新的 react-router-dom 或类似的不兼容的组合，一个使用 CommonJS，但另一个需要 ES 模块，idk。

我希望这些信息有用！

也许从 package.json 中删除 ^ 也会有所帮助，通过更明确地了解版本（根据）：

”

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

https://github.com/ReactTraining/react-router/issues/6650

如何修复：

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.