localHost 3000 显示空白页

Question

我正在尝试使用 React 和 Node 编写我的第一个 web 应用程序。 我已经为一个名为 Banner 的组件编写了一些 JS 和 CSS 并在 App.js 中呈现它，但是当我保存我的更改时，更改不会反映在 localhost:3000 上，它只显示一个空白页面。

我唯一一次让 localhost:3000 显示任何内容是当我在 index.html 正文中的 HTML p 标签中写一些文本时。 然后，浏览器显示文本。

我还尝试将 id=root 从 index.html 移动到 App.js。 那没有用。 请问，我做错了什么？ 如何让浏览器显示我的组件？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

应用程序.js

import React from 'react';
import './App.css';
import Banner from './components/Banner';
import Exhibit from './components/Exhibit'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <>
        <Router>
          <Banner />
        </Router>
      </>
    );
  }
}

export default App;

横幅.js

import React from 'react'

function Banner() {
  return (
    <div className="banner">
      <h1> Some Text that goes on Banner </h1>
    </div>
  )
}

export default Banner

横幅.css

.banner {
    height: 30vh;
    width: 100%;
    position: fixed;
    align-items: center;
    background-color: #b300b3;
}

.banner > h1 {
    color: #FFF;
    font-size: 10px;
}

索引.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>Title of Web App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 1

尝试在这个级别中变得更小。 仅在 App.js 文件中使用横幅组件。 删除 App.js 文件中的路由器和 <> </>。

Answer 2

替换class App extends Component为class App extends React.Component或添加import { Component } from 'react'

localHost 3000 显示空白页

问题描述

2 个解决方案

解决方案1
0 2022-09-01 04:27:48

解决方案2
0 2022-09-01 06:59:03

localHost 3000 显示空白页

问题描述

2 个解决方案

解决方案1 0 2022-09-01 04:27:48

解决方案2 0 2022-09-01 06:59:03

解决方案1
0 2022-09-01 04:27:48

解决方案2
0 2022-09-01 06:59:03