通过CDN引入React Router DOM遇Route未定义错误，如何解决？

核心问题原因 #

你遇到的Cannot read properties of undefined (reading 'Route')错误，主要来自两个可能：

• 脚本加载顺序错误：React Router DOM依赖React和ReactDOM，若这两个库未先于React Router DOM加载，会导致ReactRouterDOM对象初始化不完整，无法读取Route等属性。
• CDN脚本未正确引入：HTML中若未添加正确的React Router DOM脚本，或脚本加载失败，ReactRouterDOM对象会为undefined。

修复步骤 #

1. 确保正确的脚本加载顺序 #

在HTML文件中，必须按以下顺序引入依赖脚本：

<!-- 先引入React -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 再引入ReactDOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 最后引入React Router DOM -->
<script src="https://unpkg.com/react-router-dom@6.6.1/dist/umd/react-router-dom.development.js"></script>

2. 验证对象可用性 #

打开浏览器控制台，输入ReactRouterDOM，若返回包含Link、BrowserRouter、Route等属性的对象，说明加载正常；若返回undefined，检查脚本URL是否正确，或网络是否正常加载了脚本。

3. 修正路由结构（React Router v6强制要求） #

即使解决了Route找不到的问题，你的代码还存在v6用法错误：Route组件必须包裹在Routes组件内部，不能直接放在BrowserRouter下。修正后的代码如下：

const Link = ReactRouterDOM.Link;
const BrowserRouter = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Routes = ReactRouterDOM.Routes; // 新增Routes引用

...

<div>
    <BrowserRouter>
        <Navbar/>
        <div className="row mt-3">
            <div className="col-2">
            {folders.map((x, folderId) => { return (
                <div key={folderId}>
                    <Link to={`folder/${x.name}`}>{x.name}</Link>
                </div>
                ); })}
            </div>
            <div className="col-2"></div>
            <div className="col-8"></div>
        </div>

        {/* 用Routes包裹所有Route组件 */}
        <Routes>
            <Route path="/folder/:name" element={<Folder/>}/>
        </Routes>
    </BrowserRouter>
</div>

版本兼容性说明 #

你使用的react-router-dom@6.6.1是稳定版本，不存在API废弃导致Route无法获取的问题，只要脚本加载正确，即可正常使用相关组件。

内容的提问来源于stack exchange，提问作者C.N. Joseph