使用react-router-dom时根路径组件无法渲染，报组件类型无效错误

核心问题分析 #

你遇到的错误本质是组件引用或路由API使用错误，结合代码来看主要有以下几点：

1. React Router DOM 版本API混用 #

你同时导入了Routes和Switch，但在react-router-dom v6中，Switch已被Routes完全替代，两者无法混用；且v6的Route组件不再支持嵌套子组件的写法，必须通过element属性传入组件。

2. Routes组件内部内容违规 #

你将<CookieConsentModal/>直接放在<Routes>内部，违反路由规则——Routes的直接子元素只能是Route或Outlet组件，非路由组件需放在Routes外部。

3. 潜在组件导入遗漏 #

代码中用到的<Header/>、<Footer/>、<CookieConsentModal/>等自定义组件，必须确保已按正确路径导入，且导出/导入方式匹配（默认导出对应默认导入，命名导出对应命名导入），否则会出现组件引用为undefined的情况。

修正后的代码示例 #

1. 适配v6的路由结构 #

// v6只需导入这些API，无需Switch
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// 请补充所有自定义组件的正确导入，示例：
// import Header from './components/Header';
// import Footer from './components/Footer';
// import CookieConsentModal from './components/CookieConsentModal';
// import Home from './pages/Home';
// import DefyCryptoWallet from './pages/DefyCryptoWallet';
// import SwapCrypto from './pages/SwapCrypto';

const IndexPage = () => {
  return (
      <>
          <BrowserRouter>
              <Header/>
              {/* 非路由组件移到Routes外部 */}
              <CookieConsentModal/>
              <Routes>
                  {/* v6的Route通过element属性传入组件 */}
                  <Route path="/" element={<Home/>}/>
                  <Route path="page/page1" element={<DefyCryptoWallet/>}/>
                  <Route path="page/page2" element={<SwapCrypto/>}/>
              </Routes>
              <Footer/>
          </BrowserRouter>
     </>
  );
};

export default IndexPage;

2. 确认组件导入匹配 #

以Home组件为例，它是默认导出，导入需对应：

import Home from './Home'; // 替换为你的实际文件路径

额外兼容提示 #

若你实际使用的是react-router-dom v5，则需用Switch替代Routes，且根路由需添加exact属性避免匹配所有子路由：

// v5写法
import { BrowserRouter, Switch, Route } from 'react-router-dom'

const IndexPage = () => {
  return (
      <>
          <BrowserRouter>
              <Header/>
              <CookieConsentModal/>
              <Switch>
                  <Route path="/" exact>
                      <Home/>
                  </Route>
                  <Route path="/page/page1">
                      <DefyCryptoWallet/>
                  </Route>
                  <Route path="/page/page2">
                      <SwapCrypto/>
                  </Route>
              </Switch>
              <Footer/>
          </BrowserRouter>
       </>
    );
};

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