React+Node项目localhost:3000空白页问题求助

核心错误及修复方案 #

1. 组件未导出导致无法引入 #

你的Banner组件没有添加导出语句，App.js中import Banner from './components/Banner'无法获取到组件，这是空白页的主要原因。

修复后的src/components/Banner.js：

import React from 'react';

// 添加export default导出组件
export default function Banner() {
  return (
    <div className="banner">
      <h1> Some Text that goes on Banner </h1>
    </div>
  )
}

2. Class组件未正确继承React.Component #

App类组件没有继承React.Component，也未导入Component，导致组件无法正常渲染。

修复后的src/App.js（类组件版）：

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

// 必须继承React.Component
class App extends Component {
  render() {
    return (
      <>
        <Router>
          <Banner />
        </Router>
      </>
    );
  }
}

// 导出App组件供index.js引入
export default App;

或者更推荐使用React官方推荐的函数组件：

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

function App() {
  return (
    <>
      <Router>
        <Banner />
      </Router>
    </>
  );
}

export default App;

3. 代码文件混写问题 #

你将index.js、Banner.js、App.js的代码合并到了一个代码块中，实际项目中这些代码必须分别放在对应路径的文件里：

• index.js → src/index.js
• Banner.js → src/components/Banner.js
• App.js → src/App.js

4. 样式优化（可选） #

原CSS中align-items: center需要配合display: flex才能生效，否则标题不会垂直居中，同时原字体大小10px过小，建议调整：

修复后的src/App.css：

.banner {
    height: 30vh;
    width: 100%;
    position: fixed;
    display: flex; /* 新增：启用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    background-color: #b300b3;
}

.banner > h1 {
    color: #FFF;
    font-size: 20px; /* 放大字体，便于查看 */
}

5. React版本兼容性（可选） #

如果使用React 18，旧的ReactDOM.render语法已被废弃，需要改用createRoot：

修复后的src/index.js（React 18）：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

验证步骤 #

1. 将上述代码分别放入对应路径的文件中
2. 保存所有修改，若开发服务器未自动刷新，重启服务器（执行npm start）
3. 访问localhost:3000，即可看到正常渲染的Banner组件

内容的提问来源于stack exchange，提问作者Osasikemwen Ogieva