El enrutador React cambia la URL pero no actualiza la página. Además, si escribo url manualmente y presiono ENTER, las rutas funcionan correctamente, pero al hacer clic en el enlace de navegación no funcionará.
Aplicación.js
import './App.css'; import NavLinks from './compnents/Navbar/NavLinks' import Home from './compnents/Home/Home'; import About from './compnents/About/About'; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; function App() { return ( <> <Router> <Switch> <Route exact path="/" render={() => { return ( <> <NavLinks /> <Home /> </> ) }}> </Route> <Route exact path="/about" render={() => { return ( <> <h1>Hello from</h1> <NavLinks /> <About /> </> ) }}> </Route> </Switch> </Router> </> ); } export default App;Archivo para navlink en el que se agrega Link en el que establece la url NavLinks.js
import { useState } from "react"; import { Link } from 'react-router-dom'; import Logo from "./Logo"; import Container from "../GlobalComponents/Container"; const NavLinks = (props) => { const [hidden, setHidden] = useState(true); return ( <nav> <Container> <Logo /> <i onClick={() => setHidden(!hidden)} className={hidden ? "fas fa-bars fa-lg" : "fas fa-times fa-lg"} id="burgerMenu" ></i> <Link to='/'>Home</Link> <Link to='/about'>About</Link> </Container> </nav> ); }; export default NavLinks;Al hacer clic en NavLink, cambia la URL pero no carga la vista. Amablemente ayúdame. También probé con otras respuestas pero nada funciona.
Puede usar el accesorio de render en <Route> pero si está usando la última versión, ya no es compatible.
En lugar de eso, tienes dos métodos
Reemplace el render con el component prop.
<Route path="/"> {Your component} </Route><Link to={} /> solo parece funcionar cuando se accede dentro del enrutador, si fuera del enrutador sería mejor usar <a href={} /> .
He estado luchando con lo mismo antes.
Cuando se dice dentro del enrutador me refiero a algo como esto:
<Router> <head> <Link to={"/contactUs"}>Contact us</Link> </head> <Routes> <Route path={"/contactUs"} element={<ContactUs/>} /> </Routes> </Router>