indes.js（npm启动此文件）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root') // Use getElementById with the id attribute of the target element
);

用于路由的routes.js文件

import React from 'react';
import { Routes ,Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contacts';
import NotFound from './components/NotFound';

const Rooutes = () => {
   return (
     <Routes>
       <Route exact path="/" element={Home} />
       <Route path="/about" element={About} />
       <Route path="/contact" element={Contact} />
       <Route element={NotFound} />
     </Routes>
   );
};
 
export default Rooutes;

和一个html文件的使用的，像这样：

import React from 'react';

const About = () => {
 return (
   <>
     h1 about Component
   </>
 );
};

export default About;

一切都很完美没有检测到错误，npm编译成功，但没有html元素呈现给浏览器，任何建议/帮助？