React报Header组件渲染无返回值错误，导入正确该如何排查

问题根因 #

你的Header函数组件缺少return语句，组件渲染时没有返回任何合法的JSX内容，完全匹配报错提示里「缺失返回语句」的场景。

修复方案 #

修改Header.js的代码，给JSX外层添加显式return即可：

import "./Header.css";
// import { classes } from "./Header.css";

export default function Header() { 
    // 新增return包裹JSX内容
    return (
        <header>
            <div className="overlay"></div>
            <video playsInline="playsinline" autoPlay="autoplay" muted loop>
            <source 
                src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" 
                type="video/mp4"/>
            </video>

            {/* <div className={classes.container + "h-100"}> */}
            <div className="container h-100">
                <div className="d-flex h-100 text-center align-items-center">
                <div className="w-100 text-white">
                    <h1 className="display-3">Video Header</h1>
                    <p className="lead mb-0">Using HTML5 Video and Bootstrap</p>
                </div>
                </div>
            </div>
        </header>
    )
}

补充说明 #

如果你想用更简洁的写法，也可以把函数组件改成箭头函数的隐式返回形式，不需要手动写return：

const Header = () => (
    <header>
        {/* 原有JSX内容 */}
    </header>
)
export default Header

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