React路由失效报错：dispatcher is null及无效Hook调用问题

使用react-router-dom按教程实现React路由后，碰到两个问题：

• 出现「Warning: Invalid hook call」警告，提示Hook只能在函数组件内部调用；
• 抛出「Uncaught TypeError: dispatcher is null」错误。

已确认所有依赖均使用React 18.2版本，不存在版本不匹配问题。

相关代码如下：

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

src/App.js

import './App.css';
import { useState } from 'react';
import Home from './routes/main/Home.js'
import About from './routes/about/About.js';
import { Route, Routes } from 'react-router-dom';


function App() {
  return (
    <div className="App">
      <Routes>
        <Route path='/' element={ <Home/> } />
        <Route path='about' element={<About/>}/>
      </Routes>
    </div>
  );
}

export default App;

src/routes/main/Home.js

import React from "react"

function Home(){
    return (
      <div>
        <h1>This is the home page</h1>
      </div>
    )
}

export default Home

src/routes/about/About.js

import React from 'react'

function About() {
    return (
        <div>
            <h1>This is the about page</h1>
        </div>
    )
}

export default About

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