使用React Router出现Cannot read properties of null(reading 'useRef')错误求助

我在Create React App项目中仅添加路由相关代码后出现错误，以下是代码及问题详情：

现有代码 #

App.js #

// App.js

import logo from './logo.svg';
import './App.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HelloWorld from './Components/HelloWorld';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route exact path="/" component={HelloWorld} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Components/HelloWorld.js #

// Components/HelloWorld.js

import React, { Component } from 'react';

class HelloWorld extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <h1>Hello World!</h1>
        )
    }
}

export default HelloWorld;

错误信息 #

页面未显示"Hello World!"，编译报错：

Compiled with problems:
×
ERROR
Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (LOCALHOST_HERE/static/js/bundle.js:47954:25)
    at BrowserRouter (LOCALHOST_HERE/static/js/bundle.js:44414:55)
    at renderWithHooks (LOCALHOST_HERE/static/js/bundle.js:21295:22)
    at mountIndeterminateComponent (LOCALHOST_HERE/static/js/bundle.js:24581:17)
    at beginWork (LOCALHOST_HERE/static/js/bundle.js:25877:20)
    at HTMLUnknownElement.callCallback (LOCALHOST_HERE/static/js/bundle.js:10887:18)
    at Object.invokeGuardedCallbackDev (LOCALHOST_HERE/static/js/bundle.js:10931:20)
    at invokeGuardedCallback (LOCALHOST_HERE/static/js/bundle.js:10988:35)
    at beginWork$1 (LOCALHOST_HERE/static/js/bundle.js:30862:11)
    at performUnitOfWork (LOCALHOST_HERE/static/js/bundle.js:30109:16)

ERROR
Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (LOCALHOST_HERE/static/js/bundle.js:47954:25)
    at BrowserRouter (LOCALHOST_HERE/static/js/bundle.js:44414:55)
    at renderWithHooks (LOCALHOST_HERE/static/js/bundle.js:21295:22)
    at mountIndeterminateComponent (LOCALHOST_HERE/static/js/bundle.js:24581:17)
    at beginWork (LOCALHOST_HERE/static/js/bundle.js:25877:20)
    at HTMLUnknownElement.callCallback (LOCALHOST_HERE/static/js/bundle.js:10887:18)
    at Object.invokeGuardedCallbackDev (LOCALHOST_HERE/static/js/bundle.js:10931:20)
    at invokeGuardedCallback (LOCALHOST_HERE/static/js/bundle.js:10988:35)
    at beginWork$1 (LOCALHOST_HERE/static/js/bundle.js:30862:11)
    at performUnitOfWork (LOCALHOST_HERE/static/js/bundle.js:30109:16)

ERROR
Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (LOCALHOST_HERE/static/js/bundle.js:47954:25)
    at BrowserRouter (LOCALHOST_HERE/static/js/bundle.js:44414:55)
    at renderWithHooks (LOCALHOST_HERE/static/js/bundle.js:21295:22)
    at mountIndeterminateComponent (LOCALHOST_HERE/static/js/bundle.js:24581:17)
    at beginWork (LOCALHOST_HERE/static/js/bundle.js:25877:20)
    at beginWork$1 (LOCALHOST_HERE/static/js/bundle.js:30840:18)
    at performUnitOfWork (LOCALHOST_HERE/static/js/bundle.js:30109:16)
    at workLoopSync (LOCALHOST_HERE/static/js/bundle.js:30032:9)
    at renderRootSync (LOCALHOST_HERE/static/js/bundle.js:30005:11)
    at recoverFromConcurrentError (LOCALHOST_HERE/static/js/bundle.js:29497:24)

（注：LOCALHOST_HERE实际为localhost:3000，因平台限制替换）

排查情况 #

• 移除路由直接渲染HelloWorld组件时，页面正常显示"Hello World!"，代码如下：

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

• 问题最初出现在更大的项目中，上述是隔离出的最小复现示例
• 搜索错误指向包版本冲突，但已使用react@^18.2.0，尝试相关方案无效
• 查阅React Router文档未找到解决方法，推测是环境问题但不知如何修复

请求帮助解决该问题。

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