如何解决ReactRouterDOM is not defined错误？

问题根源 #

1. 你的HTML里没加React Router DOM的CDN脚本，浏览器根本找不到ReactRouterDOM这个全局变量。
2. 重复引入了React和ReactDOM的开发版+生产版，纯属多余还可能搞出冲突。
3. 你试的import语法只在Webpack/Vite这类模块化项目里能用，纯CDN环境下完全不生效。
4. 教授的视频是老版本，用的React Router v5及以下，你搭的是React 18，得适配v6的新写法。

一步步修复 #

1. 先改index.html的CDN引入

删掉重复的React/ReactDOM脚本，加上React Router DOM v6的CDN，只留一套开发版（开发版方便调试，上线时换成生产版即可）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Routing</title>

    <!-- Load Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>

  <div id="root"></div>
 
  <!-- 只保留一套React环境，加上React Router DOM v6 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-router-dom@6/umd/react-router-dom.development.js" crossorigin></script>
 
  <!-- 你的组件脚本 -->
  <script src="index.js" defer type="text/babel"></script>
  <script src="home.js" defer type="text/babel"></script>
  <script src="about.js" defer type="text/babel"></script>
  <script src="products.js" defer type="text/babel"></script>

</body>
</html>

2. 适配React Router v6修改index.js

v6的路由写法有不少变化，直接替换成以下代码：

function Spa(){
  // 从全局变量里解构出需要的路由组件
  const { HashRouter, Routes, Route, Link } = ReactRouterDOM;
     
  return (
    <HashRouter>
      <div>
        <h1> Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about">about</Link> --
        <Link to="/products">products</Link> 
        <hr/>
        {/* v6要求所有Route必须放在Routes组件内部 */}
        <Routes>
          {/* 把旧的component属性换成element，且需传入<组件名 />格式的JSX */}
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
        </Routes>
      </div>
    </HashRouter>
  );
}

// React 18推荐用createRoot渲染，替代旧版ReactDOM.render
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Spa />);

3. 检查组件命名规范

你的home.js、about.js、products.js里的组件名必须大写开头（React组件的强制要求），示例如下：

// home.js
function Home() {
  return <h2>Home Page</h2>;
}

// about.js
function About() {
  return <h2>About Page</h2>;
}

// products.js
function Products() {
  return <h2>Products Page</h2>;
}

额外提醒 #

• 纯CDN环境下别用import语法，直接通过ReactRouterDOM全局变量访问路由组件即可。
• 要是非要和教授的旧代码完全对齐，可以把React Router降级到v5版本，但更建议学习v6——它是目前的主流版本，语法更简洁规范。

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