React中HeroSection组件不显示问题求助

问题概述 #

React项目里仅能看到导航栏（Navbar），HeroSection组件区域完全空白，怀疑和video-2.mp4文件有关，但多次尝试后仍未解决。相关代码如下：

HeroSection组件代码 #

import React from 'react';
import '../App.css'
import { Button } from './Button';
import './HeroSection.css';

function HeroSection() {
  return (
    <div className='hero-container'>
      <video autoPlay muted loop src="/videos/video-2.mp4" />
        <h1>ADVENTURE AWAITS</h1>
        <p>What are you waiting for?</p>
        <div className='hero-btns'>
          <Button className='btns' buttonStyle='btn--outline'
          buttonSize='btn--large'>GET STARTED</Button>

          <Button className='btns' buttonStyle='btn--primary'
          buttonSize='btn--large'>WATCH TRAILER<i className='far fa-play-circle'/>
          </Button>
        </div>
    </div>
  )
}

export default HeroSection;

App.js代码 #

import React from 'react';
import Navbar from './components/Navbar.js';
import './App.css';
import Home from './components/pages/Home.js';
import { BrowserRouter as Router,Routes,Route} from 'react-router-dom';


function App() {
  return (
    <>
      <Router>
        <Navbar/>
        <Routes>
          <Route path='/' exact component={Home}/>
        </Routes>
      </Router>
    </>
  );
}

export default App;

排查与解决步骤 #

1. 修复React Router v6的Route写法错误 #

你用的是react-router-dom v6版本（从Routes组件可判断），但v6已废弃component属性，改用element传递组件。这个错误会导致Home组件根本没被渲染，自然看不到HeroSection。

修改App.js中的Route：

<Routes>
  <Route path='/' element={<Home />} />
</Routes>

（v6中exact无需手动设置，默认就是精确匹配）

2. 确认视频文件路径与可用性 #

• 静态资源必须放在项目根目录的public文件夹下，确保public/videos/video-2.mp4存在，文件名大小写和代码完全一致（Linux/macOS系统区分大小写）。
• 直接在浏览器地址栏访问http://localhost:3000/videos/video-2.mp4，如果无法播放，说明文件损坏或路径错误，重新放置正确的视频文件即可。

3. 检查HeroSection的CSS样式 #

空白大概率是容器高度为0或内容被遮挡：

• 给.hero-container设置足够高度：

  .hero-container {
    min-height: calc(100vh - 80px); /* 80px替换为你的导航栏实际高度 */
    position: relative;
    overflow: hidden;
  }
  

• 给视频元素设置全屏覆盖样式：

  .hero-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* 将视频置于文字下方 */
  }
  

• 确保文字内容层级在视频之上，给文字元素添加z-index: 1;（需先给.hero-container设置position: relative;）。

4. 验证Home组件是否正确渲染HeroSection #

打开Home.js，确认正确导入并渲染HeroSection：

import React from 'react';
import HeroSection from '../HeroSection'; /* 路径根据组件实际位置调整 */

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

export default Home;

5. 解决视频编码兼容性问题 #

如果视频编码不被浏览器支持，可转成H.264编码的MP4，或添加备用格式：

<video autoPlay muted loop>
  <source src="/videos/video-2.mp4" type="video/mp4" />
  <source src="/videos/video-2.webm" type="video/webm" />
</video>

内容的提问来源于stack exchange，提问作者Manfredo Román