Как исправить ошибку: Ошибка при попытке импорта: «Маршрут» не экспортируется из «React-router-dom»

import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route ,Switch} from 'react-router-dom'
import Home from './components/Home'

class App extends Component {
render() {
  return (
    <BrowserRouter>
     <div className = "App">
     <Navbar />
      <Switch>
      <Route exact path='/' component = {Home} />
    </Switch>

    </div>
    </BrowserRouter>
   );
  }
  }

  export default App;

попробуй так

Кажется, ваш маршрут устарел в следующих версиях, поэтому используйте этот импорт:

import {Route} from 'react-router-dom/Route';

У меня была такая же проблема. У вас может быть конфликт с NPM и YARN. Я удалил свой yarn.lock и снова запустил его только с package.lock; и это сработало.

Вы должны использовать только Yarn или NPM.

Закройте сервер и перезапустите его. Это работает нормально.

npm start или yarn start

Я тоже застрял на этом... Для меня это сработало, когда версии «реагировать-маршрутизатор» и «реагировать-маршрутизатор-дом» совпадали.

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

Возможно, это происходит из-за того, что вы его не установили. Вы должны запустить эту команду:

npm i react-router

Пожалуйста, еще раз проверьте написание BrowserRouter или, если написание правильное, перезапустите npm, используя CTRL + C и

npm start 

Вы должны добавить эту строку в свои компоненты.

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

Моя проблема решилась этим методом.

проблема решена во мне

npm uninstall react-router

а также

npm uninstall react-router-dom

тогда

npm install react-router react-router-dom

используйте версию 5.0.0

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

BrowserRouter возвращается, а не Router.

Так и должно быть

import { BrowserRouter } from 'react-router-dom'

или

import { BrowserRouter as Router } from 'react-router-dom'

Установите react-router и react-router-dom следующим образом:

npm install react-router@next react-router-dom@next

Ошибка возникает из-за того, что вы используете react-router v5 вместо v6-

Следуй этим шагам-

Шаг 1:

npm uninstall react-router

npm uninstall react-router-dom

Шаг 2:

npm install react-router@next react-router-dom@next

Шаг 3: Перезагрузите сервер

И все готово!

Эта проблема возникает из-за версии react-router-dom. Попробуйте обновить react-router-dom до версии 6.

Просто запустите команду:

npm install [email protected]

Я думаю, что это может быть связано с установкой устаревшей версии. Я смог запустить npm install history react-router-dom@next, и это решило мою проблему.

Switch устарел в более новых версиях, используйте Routes, он будет действовать так же.

Для react-router-dom v6 и выше используйте это в своем App.js

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path = "/" element = {<Home/>}/>
          <Route exact path = "/login" element = {<Login/>}/>
          <Route exact path = "/recovery-password" element = {<RecoveryPassword/>}/>
          <Route path = "*" element = {<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

Изменения, сделанные с v5 на v6

Switch изменено на Routes

<Route path = '/' component = {Home}></Route>

изменился на

<Route path = '/' element= {<Home />}></Route>

Вы должны удалить папку: "node_modules" и написать это:

npm i react react-dom react-router-dom

Меня устраивает.

работал, установив:

npm install react-router-dom@5

в папке проекта