单HTML文件中React路由报错求助：组件类型无效等问题

针对react-router-dom v6.x（如6.23.0）的解决方案 #

你遇到的TypeError: Cannot read properties of undefined (reading 'Routes')错误，核心原因是CDN引入方式错误或者组件导入写法不对。v6版本的react-router-dom导出结构和旧版本完全不同，单HTML文件中必须用正确的全局变量来访问组件：

• 正确引入CDN资源
  要确保引入的是v6版本的CDN，并且顺序正确（先react，再react-dom，最后react-router-dom）：

  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/react-router-dom@6/umd/react-router-dom.production.min.js"></script>
  

• 正确使用全局组件变量
  v6版本中，react-router-dom的组件挂载在ReactRouterDOM全局对象下，所以要通过这个对象调用BrowserRouter、Routes、Route：

  const { BrowserRouter, Routes, Route } = ReactRouterDOM;
  

• 完整示例代码
  以下是一个可运行的单HTML文件路由示例，包含两个函数式组件和路由配置：

  <!DOCTYPE html>
  <html>
  <head>
    <title>React Router Demo</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/react-router-dom@6/umd/react-router-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  
    <script type="text/babel">
      // 定义两个页面组件
      const Home = () => <h1>首页</h1>;
      const About = () => <h1>关于页</h1>;
  
      // 解构react-router-dom的组件
      const { BrowserRouter, Routes, Route } = ReactRouterDOM;
  
      function App() {
        return (
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </BrowserRouter>
        );
      }
  
      // 渲染App组件
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
  </html>
  

针对react-router-dom v4.x（如4.2.2）的解决方案 #

你最初遇到的React.createElement: type is invalid错误，大概率是因为：

• v4版本中没有Routes组件，而是用Switch组件匹配路由

• 组件导入或引用错误，比如误写了组件名称

• 正确的v4写法要点

  • 从ReactRouterDOM中解构BrowserRouter、Switch、Route
  • Route组件用component属性传递组件，而不是v6的element
  • 示例核心代码：

    const { BrowserRouter, Switch, Route } = ReactRouterDOM;
    
    function App() {
      return (
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </BrowserRouter>
      );
    }
    

通用排查要点 #

• 确保所有自定义组件都是有效的函数式组件，没有拼写错误
• 单HTML文件中，组件必须在渲染代码之前定义，或者用函数提升
• 检查CDN链接是否有效，版本是否匹配（比如react和react-dom版本要一致）

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