Блог

Главная - Вопросы по программированию - Switch’ не экспортируется из ‘react-router-dom’

Switch’ не экспортируется из ‘react-router-dom’

#reactjs

Вопрос:

В файле package.json добавлены зависимости react-router-dom. Компонент приложения, завернутый BrowswerRouter, но когда я переношу маршрут с помощью switch, он выдает следующую ошибку Switch’ не экспортируется из ‘react-router-dom’. Я удалил package.json.блокировка, модули узла, снова установленный npm и установка npm @babel/core -сохранить. Все еще не работает. Я успешно потратил на это 6 часов. Можете ли вы, пожалуйста, помочь мне исправить это? почему он не импортируется?

Index.js

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

ReactDOM.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js:

  import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Switch,Route,Link} from 'react-router-dom';
import Home from './Home';
class App extends React.Component {
  componentDidMount(){
    alert('mounting');
  }
  componentDidUpdate(){
    alert('updated');
  }
 render(){
  return (
    
    <div className="App">
     
    <div>
      <Link to="/">Home</Link>
    </div>

    <hr />

    <Switch>
      <Route exact path="/">
        <Home/>
      </Route>
    </Switch>
 
  </div>
 
);
 }
}

export default App;

import React from 'react';

    const Home = () => {
    return <h1>Home</h1>;
  };
  
  export default Home;

package.json

 "dependencies": {
    "@babel/core": "^7.16.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-dom": "^6.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

Ответ №1:

Использование Routes вместо Switch в react-router v6

Вы используете react-router-dom версию 6, которая заменила Switch компонентом Routes

 import {
  BrowserRouter,
  Routes, // instead of "Switch"
  Route,
} from "react-router-dom";

// ...

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>

Обратите внимание, что теперь вы также передаете свой компонент в качестве element опоры вместо использования дочерних элементов.

Комментарии:

1. Спасибо, но я тоже пробовал это, почему это показывает ошибку при попытке импорта: ‘Switch’ не экспортируется из ‘react-router’.

2. Я обновил свой awnser, я пропустил вашу версию react-router, которая является v6, а не v5. Попробуйте новое исправление 🙂

3. Маршруты Brother не показывают ошибку, но при этом не отображается домашний компонент

4. Проверьте ссылку на документацию. v6 также изменил способ передачи компонента. <Route exact path="/" element={<Home />} /> должно быть правильным

5. Большое спасибо , брат , Это мне очень помогло

Ответ №2:

если вы хотите использовать Switch , установите react-router-dom версии 5. Переключатель заменен в react-router-dom версии 6.

npm install react-router-dom@5

Ответ №3:

Пользователи не смогут найти переключатель react-router-dom . Им необходимо установить версии до 5 или ниже 5. Попробуйте приведенный ниже вариант, который будет работать. Если пользователь использует маршруты вместо Switch, это может не сработать.

 npm install react-router-dom@5
Метки: