如何修复'ReactRouterDOM' is not defined no-undef等React路由错误？

一、修复ReactRouterDOM is not defined错误 #

你当前用了解构导入{ BrowserRouter, Router, Route, Link }，但代码里却尝试通过ReactRouterDOM访问组件，两者冲突，二选一即可：

方式1：直接使用解构导入的组件 #

修改导入语句，补上HashRouter的解构导入，同时删除组件内重复定义的const Route = ReactRouterDOM.Route;等行：

import { HashRouter, Route, Link } from 'react-router-dom';

之后直接在组件内使用HashRouter、Route、Link即可。

方式2：导入整个ReactRouterDOM模块 #

如果习惯用ReactRouterDOM.xxx的写法，把导入改成：

import * as ReactRouterDOM from 'react-router-dom';

这样就能正常访问ReactRouterDOM.Route、ReactRouterDOM.HashRouter等对象。

二、修复Home/about/products未定义错误 #

这些是你需要的页面组件，必须先创建（或导入）才能使用：

示例：在当前文件内定义基础组件 #

在导入语句之后添加组件定义（注意React组件名必须首字母大写）：

// 定义Home组件
function Home() {
  return <h2>Home页面</h2>;
}

// 定义About组件
function About() {
  return <h2>About页面</h2>;
}

// 定义Products组件
function Products() {
  return <h2>Products页面</h2>;
}

同时把Route里的component={about}改成component={About}，component={products}改成component={Products}。

三、适配React Router v6的注意事项（新建应用默认是v6） #

旧教程的写法和v6不兼容，需要做以下调整：

1. Route的component属性改为element，传入JSX格式：

   <Route path="/" element={<Home />} />
   

2. v6默认精确匹配，无需再写exact属性。
3. 必须用Routes组件包裹所有Route，同时导入Routes：

   import { HashRouter, Routes, Route, Link } from 'react-router-dom';
   

完整修复后的代码示例 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { HashRouter, Routes, Route, Link } from 'react-router-dom';

// 定义页面组件
function Home() {
  return <h2>Home页面</h2>;
}

function About() {
  return <h2>About页面</h2>;
}

function Products() {
  return <h2>Products页面</h2>;
}

function Spa(){
  return(
    <HashRouter>
      <div>
        <h1>Routing - Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">About</Link> --
        <Link to="/products/">Products</Link>
        <hr/>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about/" element={<About />} />
          <Route path="/products/" element={<Products />} />
        </Routes>
      </div>
    </HashRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Spa />
  </React.StrictMode>
);

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