Question

我刚刚像往常一样从 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>

Answer 1

嗯，这个问题是由于我自己对反应框架的无知。问题是我正在尝试使用 jquery 脚本，该脚本位于我项目的 public/assets 文件夹中。在我删除 index.html 中的行后，它开始工作..

ReactJS 停止渲染

1 个答案: