警告：請使用 `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.