How to Reload a Page With React-Router

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



Leave a reply



Submit