react-router-dom导入Switch报错'Switch' is not exported问题咨询

你安装的react-router-dom为v6.0.0以上版本，该版本官方已经移除了Switch组件，改用Routes组件替代，这是报错的核心原因，和你尝试调整的babel依赖、node_modules安装完整性没有关联。

提供两种适配方案，可根据自身需求选择：

方案1：适配v6版本修改代码（推荐） #

修改步骤如下：

• 替换Switch导入为Routes
  将App.js中的导入语句：

  import {Switch,Route,Link} from 'react-router-dom';
  

  修改为：

  import {Routes,Route,Link} from 'react-router-dom';
  

• 替换JSX中的<Switch>标签为<Routes>标签
• 调整Route组件的写法：v6版本的Route不再支持嵌套子组件的写法，需要通过element属性传入组件实例，同时默认开启精确匹配，不需要额外添加exact属性。
  将原来的Route写法：

  <Switch>
    <Route exact path="/">
      <Home/>
    </Route>
  </Switch>
  

  修改为：

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

修改后的完整App.js代码示例：

import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Routes,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 />
      <Routes>
        <Route path="/" element={<Home/>} />
      </Routes>
    </div>
  );
 }
}

export default App;

方案2：降级到v5版本兼容旧写法 #

如果不想修改现有代码，可以直接将react-router-dom和react-router降级到v5版本，执行命令：

npm install react-router@5.3.4 react-router-dom@5.3.4

安装完成后重启项目即可正常使用Switch组件。

内容的提问来源于stack exchange，提问作者enamul haque