React拆分组件至独立文件导入后页面空白问题排查

拆分组件后白屏是JSX转译或模块加载失败导致渲染被阻断，按以下顺序排查即可：

1. 补全组件文件缺失的React导入 #

这是单文件代码正常、拆分后白屏的最高发原因
在React 17之前的版本，以及未开启新版JSX转换的脚手架环境中，所有写了JSX语法的文件都必须在顶部导入React，否则JSX无法被正常转译，直接触发报错阻断渲染。
你的Header组件文件开头缺少React导入，补上即可：

// Header.js 顶部新增这行
import React from 'react'

export default function Header(){
    return(
    <header>
        <nav className="nav">
            <img src="./react-logo.png" className="img" />
            <ul className="nav-items">
                <li> Pricing </li>
                <li> About </li>
                <li> Contact </li>
            </ul>
        </nav>
    </header>
    )
}

同理，Footer、Main两个组件文件如果也写了JSX，同样要在顶部加这行导入。index.js里如果没引入React、ReactDOM也要补上：

// index.js 顶部确认有这两行导入
import React from 'react'
import ReactDOM from 'react-dom'

import Header from "./Header"
import Footer from "./Footer"
import Maincontent from "./Main"

function Page(){
    return(
        <div>
        <Header />
        <Maincontent/>
        <Footer />
        </div>
    )
}

ReactDOM.render(<Page/>, document.getElementById("root"))

2. 核对模块路径与文件名、导出写法完全匹配 #

模块加载失败也会直接导致白屏，逐一核对：

• import语句的路径和实际文件名完全一致，大小写也要对应：比如写import Header from "./Header"，对应组件文件必须命名为Header.js/Header.jsx，不能是header.js这类大小写不符的名字（Linux、Mac环境对文件名大小写强校验）；你写的import Maincontent from "./Main"要确认对应组件文件叫Main.js，不要写成Maincontent.js。
• 核对每个组件的导出写法：你现在用的是默认导入（不带花括号），对应组件必须用export default导出；如果写成export function xxx(){}这种命名导出，导入时需要加花括号写成import { Xxx } from './xxx'，否则导入值为undefined，渲染时会报错。

3. 控制台定位具体报错 #

按F12打开浏览器开发者工具，在Console面板可以看到具体报错信息，对应修复即可：

• 报React is not defined：对应文件缺少React导入，按第一条修复
• 报Module not found: Can't resolve 'xxx'：对应import路径错误，按第二条核对
• 报Objects are not valid as a React child：组件导入/导出写法不匹配，核对export和import的写法对应

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