CODEWITHSUNDEEP
reactjsreload
Sarvesh Agarwal
Sarvesh Agarwal

Reputation: 152

React reload page by clicking on same link

I have my webpage as below:- enter image description here

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?

Upvotes: 4

Views: 13817

Answers (1)

John Shanks
John Shanks

Reputation: 185

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

}

Upvotes: 4

Related Questions