Маршрутизация не работает

В моем файле App.js я создал маршрутизатор, и у него должна быть страница по умолчанию (Home).

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from "react";
import Navigation from "./Pages/Navigation";
import Home from './Pages/Home';
import Footer from './Pages/Footer';
import Projects from './Pages/Projects';
import Contact from './Pages/Contact';
import Policy from './Pages/Privacy';
import 'bootstrap/dist/css/bootstrap.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <Navigation />
      <BrowserRouter>
        <Routes>
          <Route path = "/" exact component = {Home} />
          <Route path = "/home" component = {Home} />
          <Route path = "/Projects" component = {Projects} />
          <Route path = "/Contact" component = {Contact} />
        </Routes>
      </BrowserRouter>

      <br></br>
      <br></br>
      <br></br>
      <Footer />
    </div>
  );
}

export default App;

Home.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
import { FaPlaneDeparture } from "react-icons/fa";

function Home () {
  return (
    <section className = "relative pb-2">
      <div className='w-full h-[700px] bg-gray-900/90 absolute'>
        <img className='w-full h-full object-cover mix-blend-overlay' src = "https://megax.s3.amazonaws.com/1.png" alt = "airpotimg" />
      </div>

      <div className='max-w-[1240px] mx-auto text-white relative'>
        <center>
          <div className='px-4 py-12 md:block hidden'>
            <div style = {{ display: 'block', width: 800, padding: 30 }}>
              <Carousel>
                <Carousel.Item interval = {4500}>
                  <img src = "https://megax.s3.amazonaws.com/1.png" class = "d-block w-100"></img>
                </Carousel.Item>
                <Carousel.Item interval = {2500}>
                  <img src = "https://megax.s3.amazonaws.com/2.png" class = "d-block w-100"></img>
                </Carousel.Item>
                <Carousel.Item interval = {2500}>
                  <img src = "https://megax.s3.amazonaws.com/3.png" class = "d-block w-100"></img>
                </Carousel.Item>
              </Carousel>
            </div>
            <h2 className='text-3xl pt-8 text-slate-300 uppercase text-center'></h2>
            <h3 className='py-4 text-3xl text-slate-300 text-center'>xxx</h3>
            <p className='py-4 text-3xl text-slate-300 text-center'>
              AWS
            </p>
          </div>
        </center>
      </div>
    </section>
  )
}  

export default Home;

Запуск моего проекта с помощью npm start показывает следующий результат:

Как видите, компонент Home не отображается в качестве маршрута по умолчанию в моем приложении. Фактически, когда я нажимаю на любую другую опцию на панели навигации, ничего не происходит! Похоже, мне что-то не хватает в конфигурации маршрутизатора или методе навигации.

Навигация.js

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, {useState} from 'react'
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { FaUserAlt, FaSignInAlt } from 'react-icons/fa';

function Navigation() {
  const [nav, setNav] = useState(false)
    
  const handleClick = () => setNav(!nav)

  const handleClose = () => {
    setNav(false);
  };

  return (
    // Navigation bar on large screen
    <div className='w-screen bg-gray-100 h-[70px] z-10 fixed drop-shadow-lg'>
      <div className='px-2 flex justify-between items-center w-full h-full'>
        <div className='flex items-center'>
          <h1 className='text-3xl font-bold text-black mr-4 sm:text-4xl'>Megax</h1>
          <ul className='hidden text-black md:flex'>
            <li className='cursor-pointer hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <a href = "/home">Home</a>
            </li>

            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <a href = "/Projects">Projects</a>
            </li>
        
            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <a href = "/Privacy">Privacy</a>
            </li>
        
            <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
              <a href = "/Contact">Contact</a>
            </li>
          </ul>
        </div>
        <div className='hidden md:flex pr-4'>
          <a
            className = "flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
            type = "submit"
          >
            <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
            <span className = "text-sm font-medium">
              Login
            </span>
          </a>

          <a
            className = "block cursor-pointer shrink-0 rounded-lg bg-white p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
          >
            <span className = "sr-only">Account</span>
            <FaUserAlt className='lg:w-5 lg:h-5' />
          </a>
        </div>

        <div className='md:hidden mr-4' onClick = {handleClick}>
          {!nav
            ? <MenuIcon className='w-5 text-black' />
            : <div className='flex'>
                <a
                  className = "flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
                  type = "submit"
                >
                  <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
                  <span className = "text-sm font-medium">
                    Login
                  </span>
                </a>

                <a
                  className = "block cursor-pointer shrink-0 rounded-lg bg-white mr-4 p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
                >
                  <span className = "sr-only">Account</span>
                  <FaUserAlt className='lg:w-5 lg:h-5' />
                </a>
                <XIcon className='w-5 text-black' /> 
              </div>
          }
        </div>
      </div>

      {/* Navigation on small screens */}
      <ul className = {!nav ? 'hidden' : 'absolute bg-zinc-200 w-full px-8'}>
        <li onClick = {handleClose} className='border-b-2 border-zinc-300 w-full'>
          Home
        </li>

        <li onClick = {handleClose} className='border-b-2 border-zinc-300 w-full'>
          Projects
        </li>

        <li onClick = {handleClose} className='border-b-2 border-zinc-300 w-full'>
          Privacy
        </li>

        <li onClick = {handleClose} className='border-b-2 border-zinc-300 w-full'>
          Contact
        </li>
      </ul>
    </div>
  )
}

export default Navigation

Единственное, в чем я не уверен, является ли это причиной сбоя навигации по страницам через навигационные меню. Я не использовал объект Link в своем навигационном компоненте, как показано ниже:

import { Link } from "react-router-dom";

Вместо этого я просто использовал <a href = "/home">Home</a> в меню навигации.

🤔 А знаете ли вы, что...
React - это библиотека JavaScript, разработанная компанией Facebook.