React未同时渲染导航栏与Home组件问题求助

跟着视频用React搭建生产级网页，在合并导航菜单与HeroSection（Home组件）时，React仅渲染出导航栏，Home组件未显示。

目标 #

同时渲染导航栏与Home组件

附加信息 #

• 控制台无报错信息
• 给HeroSection.css中video标签添加background-color: red后，仍看不到任何视觉标识

目录结构 #

+---public
      favicon.ico
      index.html
      logo192.png
      logo512.png
      manifest.json
      robots.txt
      
   +---images
   +---videos
           rings.mp4          
+---src
       App.css
       App.js
       index.js
       
    +---components
           Button.css
           Button.js
           HeroSection.css
           HeroSection.js
           Navbar.css
           Navbar.js
        +---pages
                Home.js

代码片段 #

App.js #

import React from 'react';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import './App.css';

import Home from './components/pages/Home';
import Navbar from './components/Navbar';

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

export default App;

Home.js #

import React from 'react';
import '../../App.css';
import HeroSection from '../HeroSection';

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

export default Home;

HeroSection.js #

import React from 'react';
import '../App.css';

import { Button } from './Button';
import './HeroSection.css';

function HeroSection() {
    return (
        <div className='hero-container'>
            <video src="/videos/rings.mp4" autoPlay loop muted controls/>
            <h1>SOME TEXT</h1>
            <p>Another text</p>
            <div className='hero-btns'>
                <Button 
                className="btns" 
                buttonStyle='btn-outline'
                buttonSize='btn--large'
                >
                    GET STARTED
                </Button>
                <Button 
                className="btns" 
                buttonStyle='btn-outline'
                buttonSize='btn--large'
                onClick={console.log('hi')}
                >
                    WATCH TRAILER
                </Button>
            </div>
        </div>
    );
}

export default HeroSection;

已尝试无效操作 #

修改Route标签为<Route path='/' exact element={ <Home />}></Route>，无任何变化

1. 检查视频资源路径与加载状态 #

打开浏览器控制台的Network标签，刷新页面后查看rings.mp4的请求状态：

• 如果显示404：说明路径错误，确认public下的videos文件夹是否存在，视频文件名是否拼写正确；若视频放在src目录下，需通过import方式引入资源：

  // 在HeroSection.js顶部添加
  import ringsVideo from '../videos/rings.mp4';
  // 然后修改video标签
  <video src={ringsVideo} autoPlay loop muted controls/>
  

• 如果请求成功但仍不显示：尝试替换video标签为静态色块，验证容器是否正常渲染：

  // 临时替换HeroSection中的video标签
  <div style={{width: '100%', height: '500px', backgroundColor: 'red'}}></div>
  

  若色块显示，说明视频本身存在编码或浏览器兼容问题；若仍不显示，检查HeroSection的样式。

2. 检查HeroSection.css样式 #

查看HeroSection.css中.hero-container的样式设置：

• 确认没有设置display: none、visibility: hidden、height: 0等隐藏元素的属性
• 若容器高度依赖视频内容，可手动设置.hero-container的最小高度，比如：

  .hero-container {
    min-height: 100vh;
    /* 其他样式 */
  }
  

3. 单独测试Home组件 #

临时修改App.js，只渲染Home组件，排除Navbar的布局冲突：

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

若Home组件正常显示，说明Navbar的样式可能覆盖或挤压了Home组件的空间，检查Navbar的定位（如是否设置position: fixed但未给下方内容留出padding）。

4. 验证组件导入与路由配置 #

• 确认Home组件的导入路径./components/pages/Home与目录结构一致
• 确认React Router版本是否兼容：Routes和element属性是React Router v6的写法，你的代码写法符合v6规范，无需修改

内容的提问来源于stack exchange，提问作者jefrey hernandez rodriguez