why react-router-dom doesn't work properly

Question

I'm working on a project and I want it to redirect to different pages when clicking on links in my project, but when I click, the address bar changes but it doesn't redirect to that page, I also have to refresh. For example:

This is my App Component:

import Hero from './components/Hero'
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ContactPage from './components/ContactPage';
import Solar from './components/Solar';
import Navbar from './components/Navbar';
import Wind from './components/Wind';
import Mission from './components/Mission'
import Vision from './components/Vision'
import Projects from './components/Projects';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Switch>
        <Route exact path='/' component={Hero} />
        <Route path='/contact' component={ContactPage} />
        <Route path='/solar' component={Solar} />
        <Route path='/wind' component={Wind} />
        <Route path='/mission' component={Mission} />
        <Route path='/vision' component={Vision} />
        <Route path='/projects' component={Projects} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Is it a bug? I can't figure out what I'm doing wrong.

This is my Navbar component:

import React, { useEffect, useState } from 'react'
import { AiOutlineMenu, AiOutlineClose, AiOutlineDown } from 'react-icons/ai'
import { motion } from 'framer-motion'
import { useOnHoverOutside } from '../hooks/useOnHoverOutside'
import { Link } from 'react-router-dom'

const Navbar = () => {
  const [nav, setNav] = useState(false)
  const [color, setColor] = useState('transparent')
  const [textColor, setTextColor] = useState('white')
  const [isAboutUsMenuDropdown, setIsAboutUsMenuDropDown] = useState(false)
  const [isProjectsMenuDropdown, setIsProjectsMenuDropDown] = useState(false)

  const handleNav = () => {
    setNav(!nav);
  }

  const closeHoverMenu = () => {
    setIsAboutUsMenuDropDown(false);
    setIsProjectsMenuDropDown(false)
  }

  useOnHoverOutside(closeHoverMenu) // Call the hook

  useEffect(() => {
    const changeColor = () => {
      if (window.scrollY >= 90) {
        setColor('#ffffff')
        setTextColor('#006400')
      } else {
        setColor('transparent')
        setTextColor('#ffffff')
      }
    }
    window.addEventListener('scroll', changeColor)
  }, [])

  return (
    <motion.nav
      animate={{ backgroundColor: `${color}` }}
      initial={{ backgroundColor: 'transparent' }}
      className='fixed left-0 top-0 w-full z-10 ease-in duration-300'
    >
      <div className='max-w-[1240px] m-auto flex justify-between items-center p-4 text-white'>
        <a to="/">
          <img src={require("../images/calogo.png")} className="w-20 h-20" alt="/" />
        </a>
        <ul
          style={{ color: `${textColor}` }}
          className='hidden sm:flex font-semibold'
        >
          <li className='p-4' onMouseOver={() => setIsAboutUsMenuDropDown(true)} onMouseOut={() => setIsAboutUsMenuDropDown(false)}>
            <a href='/' className='inline-flex'>About Us <AiOutlineDown className='ml-2 mt-1' /></a>
            {isAboutUsMenuDropdown && (
              <ul className="absolute z-10 bg-gray-600/60 text-white rounded py-2 mt-2" style={{ animation: "slideDown 0.3s ease-out forwards" }}>
                <li className="py-1">
                  <Link to="/mission" className="block px-4 py-1 text-white hover:bg-gray-500">
                    Mission
                  </Link>
                </li>
                <li className="py-1">
                  <Link to="/vision" className="block px-4 py-1 text-white hover:bg-gray-500">
                    Vision
                  </Link>
                </li>
              </ul>
            )}
          </li>
          <li className='p-4' onMouseOver={() => setIsProjectsMenuDropDown(true)} onMouseOut={() => setIsProjectsMenuDropDown(false)}>
            <Link to='/projects' className='inline-flex'>Projects <AiOutlineDown className='ml-2 mt-1' /></Link>
            {isProjectsMenuDropdown && (
              <ul className="absolute z-10 bg-gray-600/60 text-white rounded py-2 mt-2">
                <li className="py-1">
                  <Link to="/solar" className="block px-4 py-1 text-white hover:bg-gray-500">
                    Solar
                  </Link>
                </li>
                <li className="py-1">
                  <Link to="/wind" className="block px-4 py-1 text-white hover:bg-gray-500">
                    Wind
                  </Link>
                </li>
              </ul>
            )}
          </li>
          <li className='p-4'>
            <Link to='/contact'>Contact</Link>
          </li>
        </ul>

        {/* Mobile Button */}
        <div onClick={handleNav} className='block sm:hidden z-10'>
          {nav ? (
            <AiOutlineClose size={20} style={{ color: `${textColor}` }} />
          ) : (
            <AiOutlineMenu size={20} style={{ color: `${textColor}` }} />
          )}
        </div>
        {/* Mobile Menu */}
        <div className={nav
          ? 'sm:hidden absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center w-full h-screen bg-black text-center ease-in duration-300'
          : 'sm:hidden absolute top-0 left-[-100%] right-0 bottom-0 flex justify-center items-center w-full h-screen bg-black text-center ease-in duration-300'}
        >
          <ul>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#aboutus'>About Us</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#mission'>Mission</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#vision'>Vision</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#projects'>Projects</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#solar'>Solar</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#wind'>Wind</a>
            </li>
            <li className='p-4 text-4xl hover:text-gray-500'>
              <a href='/#contact'>Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </motion.nav>
  )
}

export default Navbar