引入react-router-dom后出现useRef读取空值运行时错误，页面无法显示

项目编译成功，但浏览器无法显示应用，控制台抛出错误：Uncaught Runtime error: Cannot read properties of null (reading 'useRef')。

未引入import {BrowserRouter as Router, Route, Routes } from 'react-router-dom'及相关<Router>、<Routes>、<Route>组件前，应用运行完全正常；移除这些代码后，应用也能正常显示。已确认安装了react-router-dom，但错误依旧存在，这是项目刚开始构建时遇到的问题。

浏览器中的错误截图显示上述useRef相关报错信息。

相关代码 #

import Navbar from './components/Navbar'
import {BrowserRouter as Router, Route, Routes } from 'react-router-dom'

function App() {

  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

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