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