React reload page by clicking on same link

Question

I have my webpage as below:-

Now if i click on complete inventory link when i was on another page then am redirected, but if i need to reload the page by clicking on the same link. Now if i used window.location.reload(), it worked when i clicked on the link but if i navigated to another link then clicking on the 'complete inventory' link didn't redirect me back to this page, but the same page kept on loading on which i was. I used below code but its not working:-

            <ul className='menu'>
                <li className="navbar-item">
                    <Link to="/inventory" onClick={() => window.location.reload()} className="nav-link">Complete Inventory</Link>
                </li>
                <li className="navbar-item">
                    <Link to="/inventory/clusters" onClick={() => window.location.reload()} className="nav-link">Inventory based on cluster</Link>
                </li>
                <li className="navbar-item">
                    <Link to="/inventory/clusters/servertype" onClick={() => window.location.reload()} className="nav-link">Inventory based on cluster and server type</Link>
                </li>
            </ul>
      </nav>

Anyone has idea how to achieve this?

Answer 1

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>
    )

}