You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用VSCode开发的React应用在localhost显示空白页求助

解决方案:React本地应用无法正常显示问题

针对你遇到的VSCode本地开发React应用无显示、终端无报错的问题,可按以下步骤排查修复:

1. 修正App组件导入路径

你的index.jsx中错误地从components文件夹导入App,但实际App.jsx位于src根目录:

// 错误路径
import App from './components/App';

// 修正后
import App from './App';

2. 修复Footer组件的语法错误

Footer.jsx的JSX代码里存在多余分号,会导致解析失败:

// 错误代码
<p>copyright ⓒ {curretYear}</p>;;

// 修正后
<p>copyright ⓒ {curretYear}</p>

3. 确认Note组件存在并正确导出

App.jsx中导入并使用了Note组件,但未提供该组件代码,请确保:

  • src/components/Note.jsx文件存在
  • 组件正确定义并导出,示例:
import React from "react";

function Note() {
  return (
    <div>
      <h3>示例笔记</h3>
      <p>笔记内容</p>
    </div>
  );
}

export default Note;

额外排查项

  • 重启本地开发服务器,确保代码修改生效
  • 打开浏览器开发者工具(F12)查看控制台报错,终端无报错不代表浏览器无错误
  • 检查public/index.html中是否存在<div id="root"></div>节点,这是React挂载的根元素

内容的提问来源于stack exchange,提问作者Dark-90

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 14:05:17