0
130
ViewsBootstrap navbar isn't refreshing in react
My bootstrap navbar is working fine but when I click on current page navbar link, that link is unclickable means it is not letting me click on it again. Other navbar link are clickable except current narbar link.
<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>
Source code: https://codesandbox.io/s/eloquent-leaf-fjml2u?from-embed=&file=/src/Navigation/Navigation.js,
when I use window.location.reload I have to double click to refresh current page. First click will take to previous page and second click takes to current page
1 answers
Answer question0
I have navbar with fixed position on the top. If I scroll to half way and I click on link that should take me to top of the page or refresh/reload.
You can create a hook to handle scrolling the window back to the top when the location changes.
Example:
import { useLocation } from "react-router-dom";
const useScrollToTop = () => {
const location = useLocation();
React.useEffect(() => {
window.scrollTo(0, 0);
}, [location]);
};
If needed, create a component to handle using the useScrollToTop hook.
Example:
const ScrollToTop = () => {
useScrollToTop();
return null;
};
Usage:
function App() {
return (
<HashRouter>
<ScrollToTop />
<div className="App">
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
</HashRouter>
);
}
