React Router应用运行报错：找不到Switch组件求助

问题原因 #

你遇到的错误是因为React Router v6 已经移除了Switch组件，改用Routes组件替代，同时Route组件的使用方式也有更新。你的代码里还在使用v5的Switch语法，所以编译报错。

解决方案 #

1. 修改组件导入和路由结构 #

将App.js中的Switch替换为Routes，并更新Route的写法（v6中Route需要通过element属性传入组件，不再支持子组件形式）：

修改后的App.js代码：

import React from 'react'; 
import Home from './Home' 
import ExpenseEntryItemList from './ExpenseEntryItemList' 
import ExpenseEntryItemForm from './ExpenseEntryItemForm' 
import './App.css'
// 替换Switch为Routes
import {BrowserRouter as Router, Link, Routes, Route} from 'react-router-dom'

function App() { 
    return ( 
        <Router> 
            <div> 
                <nav> 
                    <ul> 
                        <li> <Link to="/">Home</Link> </li> 
                        <li> <Link to="/list">List Expenses</Link> </li> 
                        <li> <Link to="/add">Add Expense</Link> </li> 
                    </ul> 
                </nav> 
                {/* 用Routes替代Switch */}
                <Routes> 
                    {/* Route改用element属性传入组件 */}
                    <Route path="/list" element={<ExpenseEntryItemList />} /> 
                    <Route path="/add" element={<ExpenseEntryItemForm />} /> 
                    <Route path="/" element={<Home />} /> 
                </Routes> 
            </div>
        </Router> 
    ); 
} 

export default App;

2. （可选）降级到React Router v5 #

如果你想继续使用Switch语法，可以卸载当前版本，安装v5版本：

# 卸载v6
npm uninstall react-router-dom
# 安装v5.3.0
npm install react-router-dom@5.3.0

安装后不需要修改原有代码，即可正常编译运行。

内容的提问来源于stack exchange，提问作者44r0n