Tengo un sitio web principal que es accesible para todos. Y tengo otra página que solo se puede ver una vez que presiona un botón que lo redirigiría a dicha página. Ya implementé mis rutas en mi App.js y coloqué el , sin embargo, cuando hago clic en el botón, no me redirige a la página especificada.

Aplicación.js:

 import React, { useState, useEffect } from 'react'; import './App.css'; import Navbar from './Components/Navbar'; import Footer from './Components/Footer'; import Dropdown from './Components/Dropdown'; import Hero from './Components/Hero'; import AboutUs from './Components/AboutUs'; import OurProgram from './Components/OurProgram'; import Research from './Components/Research'; import Data from './Components/Data'; import Loan from './Components/Loan'; import ScrollToTop from './Components/ScrollToTop'; import Gov from './Components/Gov'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { Button } from 'react-bootstrap'; {/* Backend of Toggle function */ } function App() { const [isOpen, setIsopen] = useState(false) const toggle = () => { setIsopen(!isOpen) } return ( <> <Navbar toggle={toggle} /> <Dropdown isOpen={isOpen} toggle={toggle} /> <Switch> <Route path="/"> <Hero /> <AboutUs /> <OurProgram /> <Research /> <Loan /> <Footer /> </Route> <Route path="/Gov"> <Gov /> </Route> </Switch> </> ); } export default App;

enlace utilizado:

 <Link to="/Gov" className='bg-yellow-500 text-white font-bold p-5 mb-3 rounded-lg md:p-18 text-2xl '>Useful gov links</Link>

¿Cómo puedo solucionar este problema?