Предупреждение: пожалуйста, используйте `import {NavLink} из "act-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.

Я недавно обновил свою версию response-router и response-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-dom]$ cat NavLink.js

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

Это происходит потому, что это были перенаправленные модули; модуль, который на самом деле печатает ошибку, на самом деле является реакцией-маршрутизатором, а не реакцией-маршрутизатором-домом:

warnAboutDeprecatedESMImport:

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]
  );
}

Таким образом, даже если вы не импортировали модули напрямую, вы импортировали модули из модуля, который, так сказать, импортирует модули.

В соответствии с их кодом, response-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;

согласно их документации, они упоминают, что есть 2 способа загрузки response-router-dom, один из них - Common JS, а другой - 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;

Это уже на их сайте.

Это означает, что ваш код может работать либо на Common JS, либо на ES6. Если вы сможете выяснить, в каком режиме вы работаете, вы сможете выбрать правильные операторы импорта из приведенных выше.

Старый способ запуска кода, как представляется, задокументирован здесь: import {BrowserRouter, Route, Switch } from 'response-router-dom';

Единственная документация, которую я нашел по использованию Switch, Route и этих компонентов, находится здесь, поэтому я предполагаю, что вы натолкнулись на тот же код:

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

Интересно, что когда вы выполняете шаги на этой странице, все работает как чудо, поэтому я думаю, что проблема может заключаться в том, что у вас есть смесь «новых компонентов» или зависимостей, со «старыми» (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.

Возможно, у вас несовместимая комбинация старого реагирующего маршрутизатора и нового реагирующего маршрутизатора или чего-то подобного, и один использует Common JS, а другой ожидает ES-модули, idk.

Я надеюсь, что эта информация полезна!.

возможно удаление ^ из пакета. json будет Помогите также, будучи более точным в отношении версий (согласно):

"

Пожалуйста, попробуйте установку fre sh. Был выпуск (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.