react-router-dom中Switch组件导入失败编译错误求助

你的编译错误是因为使用了react-router-dom v6版本，这个版本对路由API做了重大更新：移除了Switch组件，同时修改了Route的使用方式。

修改步骤： #

1. 替换导入：将Switch替换为v6新增的Routes组件
2. 更新Route写法：把component属性改为element，并传入组件的JSX实例（比如<Inicio />）
3. 移除exact：v6中路由默认是精确匹配，无需再手动添加该属性

修改后的完整代码： #

import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from './Components/Navbar';
import Inicio from './Components/Inicio';
import Pedido from './Components/Pedido';
import Reservar from './Components/Reservar';
import IniciarSesion from './Components/IniciarSesion';

const App = () => {
  return (
    <Router>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/pedido" element={<Pedido />} />
        <Route path="/reservar" element={<Reservar />} />
        <Route path="/iniciarsesion" element={<IniciarSesion />} />    
      </Routes>
    </Router>
  );
};

export default App;

关键变化说明： #

• Switch组件被Routes替代，Routes是v6中用于包裹所有路由规则的容器组件
• Route的component/render属性被统一替换为element，要求传入的是React元素（即JSX），而非组件类/函数本身
• v6的路由匹配逻辑默认采用精确匹配，只有当路径包含*通配符时才会进行模糊匹配，因此exact属性不再需要

内容的提问来源于stack exchange，提问作者Moncho Rodriguez Salgueiro