How to reload the page when selecting the NavLink items on reactrouter 6?
You can add a reloadDocument
property to the Link
or NavLink
that you want to cause a reload.
Link documentation
You can use
<Link reloadDocument>
to skip client side routing and let the browser handle the transition normally (as if it were an<a href>
).
Updated sandbox: https://codesandbox.io/s/react-router-bootstrap-offcanvas-menu-forked-0i4wl
React reload page by clicking on same link
My guess is the onclick event is calling the page reload before changing page perhaps?
You could try redirecting using react router dom using something like this maybe?
That way it calls the location change then the refresh?
import { useNavigate } from "react-router-dom";
export default function yourIndexPage({yourprops}) {
let navigate = useNavigate();
function changeLocation(placeToGo){
navigate(placeToGo, { replace: true });
window.location.reload();
}
return(
<ul className='menu'>
<li className="navbar-item">
<Link to="/inventory" onClick={() => changeLocation('/inventory')} className="nav-link">Complete Inventory</Link>
</li>
<li className="navbar-item">
<Link to="/inventory/clusters" onClick={() => changeLocation('/inventory/clusters')} className="nav-link">Inventory based on cluster</Link>
</li>
<li className="navbar-item">
<Link to="/inventory/clusters/servertype" onClick={() => changeLocation('/inventory/clusters/servertype')} className="nav-link">Inventory based on cluster and server type</Link>
</li>
</ul>
)
}
Problem when reloading page using react-router-dom
How to reload the page using React-Router's NavLink?
You can set forceRefresh property of BrowserRouter to true
:
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
export default function BasicExample() {
return (
<Router forceRefresh>
<div>
<Link to="/">Home</Link>
</div>
<Switch>
<Route exact path="/">
<Home />
</Route>
</Switch>
</Router>
)
}
It will reload the whole page when you click on a link made with <Link>
or <NavLink>
for the whole application. But if you want to reload just for a single <Link>
, I think you will have to do it in some other way like window.location.reload()
.
Here is CodeSandbox.
How to redirect a page to menu on reload or refresh page with react?
To fix this issue I created a new route RefreshRoute
:
import React, {useCallback, useEffect} from 'react';
import {Redirect, Route} from 'react-router-dom';
const RefreshRoute = ({
component: Component,
redirectionPath,
...rest
}: Props) => {
redirectionPath = redirectionPath ?? '/';
const perf = performance.getEntriesByType('navigation')[0].toJSON();
const reloadType = perf.type !== 'reload';
const handler = useCallback((e) => {
e.preventDefault();
e.returnValue = '';
return true;
}, []);
useEffect(() => {
window.onbeforeunload = handler;
return () => {
window.onbeforeunload = handler;
};
});
return (
<>
{reloadType ? (
<Route component={Component} {...rest} />
) : (
<Redirect to={redirectionPath} />
)}
</>
);
};
export default RefreshRoute;
App.js:
import { Router, Route } from "react-router-dom";
import Menu from "./Menu";
import MyComponent from "./MyComponent";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
export default function App() {
return (
<Router history={history}>
<Route exact path="/" component={Menu} />
<RefreshRoute path='/myComponent' redirectionPath='/' />
</Router>
);
}
Related Topics
Input Date Format With Dd/Mm/Yyyy in the Input Field
Foreach Is Not a Function Error With JavaScript Array
Calculate the Total of Item Quantity into Item Price With Dynamic HTML Input Fields Using Jquery
How to Tell If a String Contains a Certain Character in JavaScript
How to Make a Bot Delete Messages After a Certain Time Period
How to Compare Two Json Have the Same Properties Without Order
How to Download Fetch Response in React as File
How to Remove Forward and Backward Slashes from String in JavaScript
Pause/Stop Videos into Tabs When I Clicked on a Tab
How to Make New Line or Break in Array
How to Correctly Use Axios Params With Arrays
React Router - Stay At the Same Page After Refresh
How to Convert Jquery Code to JavaScript
How to Use Js to Open an HTML Select to Show Its Option List
How to Format Base64 Encoded String While Sending in Json
The Use of the Triple Exclamation Mark
How to Simulate Key Press Events Programmatically
How to Disable Print-Screen Functionality for a Webpage in All Browsers