使用React从另一个JS文件中导入一个组件（附代码）我正在学习如何使用React的组件。我的页面运行良好，但如果我把

我正在学习如何使用React的组件。

我的页面运行良好，但如果我把一个组件移到另一个JS文件中并试图导入它，我的页面就会完全空白。

下面是工作代码，其中导入部分被注释掉了：

//import Header from "./Header.js"
//import Footer from "./Footer.js"


function Body () {
        return (
                <div>
                        <h1>Reasons I am excited to learn react</h1>        
                        <ol>Reasons
                                <li>Popular</li>
                                <li>Functional</li>
                                <li>I can build apps</li>
                        </ol>
                </div>
        )
}


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

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

这里是我试图导入的头：

export default function Header () {
    return (
            <header>
                    <nav className="nav">
                            <img className="nav-image" src = "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
                            <ul className="nav-items">
                                    <li>Pricing</li>
                                    <li>About</li>
                                    <li>Contact</li>
                            </ul>
                    
                    </nav>
            </header>
    )
}

为什么当我从顶部取消注释导入的任何一行时，我的页面就完全变成了空白？