Context

I am creating a web page for a future production project with react by watching this video. At the moment of merging the navigation menu with the HeroSection (Home) 53:16 in the video, react only render the Navigation instead of both at the same time.

Objective

Render Home and the navigation bar.

Additional information

I get no errors in the web console when rendering the code and I do not get any visual indicator of the video when adding for example a background-color: red in the video tag style of HeroSection.css.

Directory structure

+---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

Code

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;

I think these codes are enough to solve this problem. However, I can share more of them if needed in an #Update Section.

Useful Links

Original Repository : https://github.com/briancodex/react-website-v1/tree/master

Actual rendered code : https://imgur.com/a/NrqEqeG

Failed Fixing attempts

I tried changing the Route line by this one <Route path='/' exact element={ <Home />}></Route> but nothing changed…