× Error: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Question

我的代码中有这个错误：错误：Header(...)：渲染中没有 returned。这通常意味着缺少 return 语句。或者，为了不渲染任何内容，return null.

我正在创建我的源代码树，但我不明白为什么会出现此错误。进口应该是正确的。

有人可以帮助我吗？提前致谢

App.js

import './App.css';
import Home from './Components/Views/Home/Home';

function App() {
  return (
    <>
      <Home/>
    </>
  );
}

export default App;

Home.js

import Header from "../../UI/Header/Header";

export default function Home() {
  return <Header />;
}

Header.js

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

export default function Header() { 
    <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>
}

资源树

src
|_ Components
|  |_UI
|    |_Header
|      |_Header.js
|
|_ Views
|  |_Home.js
|
|_ App.js

Answer 1

我想念 Header.js

上的 return

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

export default function Header() { 
    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>
    );
}

× Error: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

× Error: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

components

render

reactjs