如何解决ReactJS 停止渲染
我刚刚像往常一样从 github 中提取了我的 MERN Stack 应用程序。今天我做到了,不知何故我的应用程序不会渲染任何东西。我不相信
我刚刚像往常一样从 Github 下载了我的 MERN Stack 应用程序。我已经在我的 react 应用程序文件夹和后端文件夹中安装了 npm install
所需的所有软件包。
问题是应用程序将不再呈现任何内容,我不知道为什么。这只是一天又一天发生,而我没有做某事。有人可以帮我吗?
当我 npm start
时,我只会看到标题中带有 localhost:3000 的白屏。
我能看到的唯一选项是删除该项目,然后重新启动它。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './App.css';
ReactDOM.render(<App />,document.getElementById("root"));
app.js
import React from 'react';
import { BrowserRouter as Router,Route } from "react-router-dom";
// Components
import Header from './components/shared/header/header.component';
import Footer from './components/shared/footer/footer.component';
import Homepage from './components/homepage/homepage.component';
import Aboutme from './components/aboutme/aboutme.component';
function App() {
return (
<Router>
<div className="container">
<Header />
<Route path="/" exact component = { Homepage } />
<Route path="/om-mig" exact component = { Aboutme } />
<Footer />
</div>
</Router>
);
}
export default App;
homepage.component.js
import React,{ Component } from 'react';
import './homepage.css';
import Heading from '../shared/heading/heading.component';
export default class Homepage extends Component {
params = {
title: 'Title',subTitle: 'Subtitle'
};
render() {
return (
<div id="content">
<Heading title = {this.params.title} subTitle = {this.params.subTitle} />
<section className="contentSection" id="someId">
<div>
<h3>Some title</h3>
<p>
Some text
</p>
</div>
<img src={process.env.PUBLIC_URL + '/assets/images/someImage.jpg'} alt="SomeAlt"></img>
</section>
<section className="contentSection" id="someId">
<div>
<h3>Some title</h3>
<p>
Some text
</p>
</div>
<img src={process.env.PUBLIC_URL + '/assets/images/someImage.jpg'} alt="SomeAlt"></img>
</section>
<section className="contentSection" id="someId">
<div>
<h3>Some title</h3>
<p>
Some text
<br />
</p>
</div>
<img src={process.env.PUBLIC_URL + '/assets/images/someImage.jpg'} alt="SomeAlt"></img>
</section>
</div>
);
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="%PUBLIC_URL%/assets/js/jquery-3.6.0.min.js" />
<title>Lasse M. Jonassen</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
解决方法
嗯,这个问题是由于我自己对反应框架的无知。问题是我正在尝试使用 jquery 脚本,该脚本位于我项目的 public/assets 文件夹中。在我删除 index.html 中的行后,它开始工作..
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。