问题遇到的现象和发生背景
最近在学习前端,使用react+vite搭建一个小网页,但是发现我的网页运行起来是一片空白,所有代码都没有报错,我也不知道这是为什么,查了好久也没有发现问题所在,有人说是JS版本不兼容内核,我从edge换到chorme还是不可以,我也不知道为什么
问题相关代码,请勿粘贴截图
这是html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
这个是我的App.jsx文件
import{Navber,Welcome,Footer,Services,Transactions} from './components';
const App=()=>{
return(
<div className="min-h-screen">
<div className="gradient-bg-welcome">
<Navber />
<Welcome />
</div>
<Services />
<Transactions />
<Footer />
</div>
);
}
export default App;
这个是我的main.jsx文件:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
这个是我其中一个Navbar.jsx,其余几个只是换了一下名称
const Navbar=()=>{
return(
<h1>Navbar</h1>
);
}
export default Navbar;