0
127
ViewsLa barra de navegación Bootstrap no se actualiza en reaccionar
Mi barra de navegación de arranque funciona bien, pero cuando hago clic en el enlace de la barra de navegación de la página actual, no se puede hacer clic en ese enlace, lo que significa que no me permite volver a hacer clic en él. Se puede hacer clic en otros enlaces de la barra de navegación, excepto en el enlace de la barra de navegación actual.
<Navbar collapseOnSelect sticky='top' expand='sm' variant='dark' className='background color '> <Container > <Navbar.Toggle aria-controls='responsive-navbar-nav' /> <Navbar.Collapse className='mobile-nav' id='responsive-navbar-nav'> <Nav className='me-auto'> <Nav.Link as={NavLink} to="/" >Home</Nav.Link> </Nav> <Nav> <Nav.Link as={NavLink} to="/about">About</Nav.Link> </Nav> </Navbar.Collapse> </Container> </Navbar>Código fuente: https://codesandbox.io/s/eloquent-leaf-fjml2u?from-embed=&file=/src/Navigation/Navigation.js ,
cuando uso window.location.reload , tengo que hacer doble clic para actualizar la página actual. El primer clic llevará a la página anterior y el segundo clic llevará a la página actual
1 answers
Answer question0
Tengo barra de navegación con posición fija en la parte superior. Si me desplazo hasta la mitad y hago clic en el enlace, eso debería llevarme a la parte superior de la página o actualizar/recargar.
Puede crear un gancho para manejar el desplazamiento de la ventana hacia atrás cuando cambia la ubicación.
Ejemplo:
import { useLocation } from "react-router-dom"; const useScrollToTop = () => { const location = useLocation(); React.useEffect(() => { window.scrollTo(0, 0); }, [location]); }; Si es necesario, cree un componente para manejar usando el gancho useScrollToTop .
Ejemplo:
const ScrollToTop = () => { useScrollToTop(); return null; };Uso:
function App() { return ( <HashRouter> <ScrollToTop /> <div className="App"> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </div> </HashRouter> ); } 