React-Router-Dom V6.17.0 CDN引入Route报错及版本适配咨询

问题 #

使用CDN搭建极简React应用测试react-router-dom时，v5.3.4版本代码可正常运行，但切换至v6.17.0后出现错误：

index.tsx:1858 Uncaught TypeError: Cannot read properties of undefined (reading 'Route')

经排查，v6的CDN包导出方式及路由核心API均有较大变化，导致原有写法失效。

解决方案 #

react-router-dom v6对UMD导出的组件结构及路由逻辑做了调整，以下是适配v6.17.0的完整可运行代码：

<html>
  <head>
    <meta charset='UTF-8'>
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin></script> 
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 引入v6.17.0的UMD开发包 -->
    <script src="https://unpkg.com/react-router-dom@6.17.0/dist/umd/react-router-dom.development.js"></script>
  </head>
  <body>
    <div id='root'></div>
 
    <script type='text/babel'>
      // 从ReactRouterDOM中解构需要的组件
      const { BrowserRouter, Routes, Route, Link } = ReactRouterDOM;

      function App(){
        return (
          <BrowserRouter>
            <nav>
              <br/><Link to="/">TO HOME</Link>
              <br/><Link to="/a">TO A</Link>
              <br/><Link to="/b">TO B</Link>
            </nav>
            {/* v6必须用Routes包裹所有Route组件 */}
            <Routes>
              {/* 用element传入React元素，替代v5的component属性 */}
              <Route path="/" element={<h1>Home</h1>} />
              <Route path="/a" element={<h1>A</h1>} />
              <Route path="/b" element={<h1>B</h1>} />
            </Routes>
          </BrowserRouter>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>

关键变化说明 #

• 组件获取方式：通过解构ReactRouterDOM对象获取组件，确保正确访问v6导出的成员
• 路由容器要求：所有<Route>必须嵌套在<Routes>组件内部，替代v5中直接在Router下放置Route的写法
• Route属性调整：
  • 移除component属性，改用element传入具体的React元素
  • 移除exact属性，v6默认自动匹配最精确的路由规则
• Router组件：BrowserRouter名称未变，可直接沿用

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