我刚刚像往常一样从 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>
答案 0 :(得分:0)
嗯,这个问题是由于我自己对反应框架的无知。问题是我正在尝试使用 jquery 脚本,该脚本位于我项目的 public/assets 文件夹中。在我删除 index.html 中的行后,它开始工作..