[英]I am getting a blank page on my localhost 3000 on running npm start using reactjs
I started making an a react app and added tag naming it with covid-19 tracker and on running npm start it perfectly showed the h1 heading ie Covid 19 tracker but then I installed dependencies ie我开始制作一个 React 应用程序,并添加了使用 covid-19 跟踪器命名的标签,并在运行 npm 启动时完美显示了 h1 标题,即 Covid 19 跟踪器,但随后我安装了依赖项,即
npm install @material-ui/core
and used some of its tags and then when I run npm start there was blank screen on my localhost:3000.并使用了它的一些标签,然后当我运行 npm 开始时,我的 localhost:3000 上出现了空白屏幕。
I added tags like and imported them from "@material-ui/core" so that a dropdown box will be added on running npm start but on ruuning npm start there was a blank screen..nothing was shown..even the heading which was showing previously had gone.我添加了类似的标签并从“@material-ui/core”导入它们,以便在运行 npm 开始时添加一个下拉框但是在运行 npm 开始时有一个空白屏幕..什么都没有显示..即使是标题显示以前已经消失了。
I had pasted the image of App.js and localhost images below.我在下面粘贴了 App.js 的图像和本地主机图像。
Code snippet localhosst screenshot after running dependency tags image without using dependency tags在不使用依赖标签的情况下运行依赖标签图像后的代码片段本地主机屏幕截图
Material-UI/core is deprecated, it means that it is not compatible with current react version, therefore you can not use it on your project. Material-UI/core 已弃用,这意味着它与当前的 React 版本不兼容,因此您不能在您的项目中使用它。
As per Your first image you are calling react hook in class component or outside of functional component that is why that error is coming.根据您的第一张图片,您在 class 组件中或功能组件外部调用 react hook,这就是出现该错误的原因。
And for Material-UI/core:对于Material-UI/核心:
So Material-UI/core is now deprecated so you can't use it inside your project.所以 Material-UI/core 现在已被弃用,所以你不能在你的项目中使用它。
import React from "react";
add this line at the beginning of the App.js file.在App.js文件的开头添加此行。
Hey you can use the updated MUI v5 by using the below command this will work嘿,您可以使用以下命令使用更新的 MUI v5,这将起作用
npm install @mui/material @emotion/react @emotion/styled
and then below is the component然后下面是组件
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { MenuItem } from "@mui/material";
import "./App.css";
function App() {
return (
<div style={{ width: 100, margin: 50 }}>
<FormControl >
<Select variant="outlined" value="abc" >
<MenuItem value="worldwide">Worldwide</MenuItem>
<MenuItem value="worldwide">Option 1</MenuItem>
<MenuItem value="worldwide">Option 2</MenuItem>
<MenuItem value="worldwide">Option 3</MenuItem>
</Select>
</FormControl>
</div>
);
}
export default App;
for more info refer this link https://mui.com/有关更多信息,请参阅此链接https://mui.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.