React+Vite页面无内容显示？新手求助问题排查

核心问题：组件命名不符合React规则 #

React要求自定义组件名称必须以大写字母开头，小写开头的元素会被识别为原生HTML标签，而非自定义组件，导致你的<navSection />无法被正确渲染。

修改步骤 #

1. 修正main.jsx中的组件导入与使用 #

将导入的组件名改为大写开头，并在渲染时使用大写组件名：

import { React } from "react";
import ReactDOM from "react-dom/client";
// 导入时改为大写开头
import NavSection from "./components/nav/navSection.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      {/* 使用大写开头的组件名 */}
      <NavSection />
    </React.StrictMode>
);

2. （可选）统一组件内部函数名（规范写法） #

建议将navSection.jsx中的组件函数名也改为大写开头，和文件名保持一致：

import './navbar.css';

// 函数名改为大写开头
const NavSection = () => {
  return (
    <div>
      <p>Hello world</p>
    </div>
  )
}

export default NavSection;

原理说明 #

在React的JSX语法中，小写开头的元素会被解析为HTML内置标签（如<div>、<p>），而大写开头的元素才会被识别为用户自定义组件，进而执行组件逻辑并渲染其返回内容。

内容的提问来源于stack exchange，提问作者Raihan Firdaus