Tengo una barra de navegación que tiene enlaces Inicio y Acerca de, estoy tratando de hacer un enrutador que va a la página Acerca de cuando hago clic en el enlace Acerca de y va a Inicio cuando hago clic en el enlace Inicio, pero tampoco sé por qué. Hago clic en casa o sobre, me lleva a la página de inicio
este es el archivo App.js:
<Router> <Box> <Navbar /> <Home /> <Routes> <Route exact path="/" component={Home}/> <Route path="/about" component={AboutUs}/> </Routes> </Box> </Router>y este es el archivo Home.js:
function Home() { return ( <div> <FirstSection /> <SecondSection /> <ThirdSection /> </div> ) }y este es Acerca del archivo:
function AboutUs() { return ( <div>AboutUs</div> ) }y por último esta es la barra de navegación:
<a href="/"> <MenuButton> Home </MenuButton> </a> </Menu> <Menu> <a href="/about"> <MenuButton> About us </MenuButton> </a>Intentalo:
<Menu> <Lint to="/"> <MenuButton> Home </MenuButton> </Lint > </Menu> <Menu> <Link to="/about"> <MenuButton> About us </MenuButton> </Link > </Menu>Si la versión de su enrutador de ganado es 6, debe hacer esto:
import { BrowserRouter, Routes, Route, } from "react-router-dom"; <BrowserRouter> <Routes> <Route path="/" element={<Home/>}> <Route path="/about" element={<AboutUs/>}> </Route> </Route> </Routes> </BrowserRouter>Intente usar el componente <Link /> en el componente <NavBar /> en lugar de las etiquetas <a> .
Por lo tanto, su código debería verse como
<Menu> <Link to="/home"> <MenuButton> Home </MenuButton> </Link> </Menu> <Menu> <Link to="/about"> <MenuButton> About us </MenuButton> </Link> </Menu> Para obtener más información sobre el componente <Link /> , puede leer los documentos de react-router .