React披萨网站首页无内容显示，请求代码排查

问题描述 #

开发披萨网站时，首页无内容显示，测试页面呈现空白状态。相关代码如下：

App.js 代码 #

import './App.css';
import Navbar from './components/Navbar';
import Home from "./pages/Home";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
      <Navbar />
      <Routes>
      <Route path="/" exact component={Home} />
      </Routes>
      </Router>
    </div>
  );
}

export default App;

Home.js 代码（存放于src/Pages文件夹） #

import React from "react";
import { Link } from "react-router-dom";

function Home() {
  return (
    <div className="home">
      <div className="headerContainer">
        <h1> Star Pizzeria </h1>
        <p>PIZZA TO FIT ANY TASTE</p>
        <Link to="/menu">
        <button>ORDER NOW</button>
        </Link>
      </div>
    </div>
  );
}

export default Home;

问题排查及解决方法 #

• React Router v6 语法错误：v6版本中<Route>组件已不再支持component和exact属性，需改用element传入JSX元素，默认精确匹配路径。修改App.js中的路由配置：

  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
  

• 文件路径大小写不匹配：Home.js存放在src/Pages，但App.js导入路径为./pages/Home，区分大小写的文件系统会导致导入失败。统一路径大小写，比如改为./Pages/Home，或把文件夹重命名为pages。
• 样式隐藏内容：检查App.css或Home组件的样式，确认.home、.headerContainer是否设置了display: none、opacity: 0等隐藏属性，可临时移除样式测试内容是否显示。
• 查看控制台报错：打开浏览器开发者工具（F12）的Console面板，查看是否有导入失败、组件渲染报错等信息，这是定位空白页面的关键步骤。

内容的提问来源于stack exchange，提问作者Star Digital