Ошибка при попытке импорта: "Маршруты" не экспортируются из "react-router-dom"

#javascript #reactjs #npm

Вопрос:

Я пытаюсь использовать маршрутизатор и маршруты React, но продолжаю получать эту ошибку:

Я попробовал следующее:

удаление и повторная установка react-router-dom и react-router.
удаление папки node_modules и запуск установки npm
убедитесь, что react-router и react-router-dom имеют одну и ту же версию
Да, я перезапускал свой сервер после каждой попытки, указанной выше.

вот мой index.js код:

 import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";
import Whoops404 from "./components/Whoops404";

function Pages() {
  return (
    <Routes>
      <Switch>
        <Route path="/" element={<App />} />
        <Route path="*" element={<Whoops404 />} />
      </Switch>
    </Routes>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Pages />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

зависимости package.json:

   "dependencies": {
    "@craco/craco": "^6.1.2",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-axios": "^2.0.5",
    "react-dom": "^17.0.2",
    "react-player": "^2.9.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-spinners": "^0.11.0",
    "video-react": "^0.14.1",
    "web-vitals": "^1.1.2"
  },

1. Routes не экспортируется в react-router-dom v5, он является частью v6, заменяя Switch компонент. Просто удалите Routes компонент из вашего Pages компонента и используйте Switch . Или обновитесь до версии 6 (все еще в бета-версии, я полагаю, поэтому не используйте для производственного кода) и удалите Switch .

Ответ №1:

вы использовали «npm i react-router-dom» для установки маршрутизатора. это не входит в Маршруты.

используйте «npm i react-router-dom@next», чтобы установить версию, которая будет выпущена вместе с маршрутами.

Ответ №2:

Проверьте версию react-router-dom вашего проекта в файле package.json и прочитайте, что говорится в документации.

Я использовал react-router-dom v6, поэтому я заменяю «Переключатель» на «Маршруты», и это работает для меня.

https://reactrouter.com/docs/en/v6/getting-started/overview

Ответ №3:

1. что касается вашего package.json , кажется, вы все еще используете react-router-dom v5

Так что вам Switch не нужно использовать Routes , маршруты предназначены только для react-router-dom v6

2. Поскольку вы используете react-router-dom v5 , то ваш jsx

    <Routes>
      <Switch>
        <Route path="/" element={<App />} />
        <Route path="*" element={<Whoops404 />} />
      </Switch>
    </Routes>

следует заменить на

  <Router>
   <Switch>
        <Route path="/"><App /></Route>
        <Route path="*"><Whoops404/></Route>
    </Switch>
 </Router>

3. из нижней строки удалите маршруты, я видел это в вашем импорте, так как вы его не используете, и он даже не экспортируется из react-router-dom v5 того, что вы используете,
опять же, он только на v6

 import { Switch, Route, Routes } from "react-router-dom";

Просто для лучшей практики, чтобы ваши коды стали чистыми 4.
вы можете объединить эти две строки, так как они из одного пакета

 import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";

так что они, наконец, выглядят так, как

 import { BrowserRouter as Router, Switch, Route,  } from "react-router-dom";

Ответ №4:

Насколько я знаю, у маршрутизатора React нет Routes компонента. Я бы сказал, что вы можете опустить этот компонент, так как в их документах такой комп не используется.

Аналогичный пример из документов: https://reactrouter.com/core/api/Switch