React Router Dom升级v6报错：Element type is invalid: expected a string

问题原因 #

你遇到的报错是因为React Router v6对核心API做了不兼容更新，旧版本v5的Switch、Route相关用法在v6中已被移除/修改，导入的Switch值为undefined，最终触发组件类型校验失败。

具体修改点 #

• 替换Switch组件为v6新增的Routes组件
• Route组件的component属性替换为element属性，属性值传入组件实例（格式为<组件名 />）而非组件本身
• v6默认采用精确路径匹配规则，无需额外添加exact属性

修正后代码 #

仅需修改App.js文件即可，其余文件无需变动：

import React from 'react';
import './style.css';
// 导入Routes替代Switch
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
let App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Samuel T