通过单击相同的 link 来重新加载页面

Question

我的网页如下：-

现在，如果我在另一个页面上单击完整库存 link，则会被重定向，但如果我需要通过单击相同的 link 来重新加载页面。现在，如果我使用 window.location.reload()，当我点击 link 时它起作用了，但是如果我导航到另一个 link 然后点击 'complete inventory' link 没有' 将我重定向回此页面，但同一页面一直在加载我所在的页面。我使用了以下代码但它不起作用：-

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

有人知道如何实现吗？

Answer 1

我的猜测是 onclick 事件可能在更改页面之前调用页面重新加载？

您可以尝试使用 React 路由器 dom 进行重定向，也许可以使用类似这样的方法？这样它调用位置更改然后刷新？

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

}

通过单击相同的 link 来重新加载页面

React reload page by clicking on same link

reload

reactjs