在Next.js中进行客户端重新加载并更改URL

如何解决在Next.js中进行客户端重新加载并更改URL

我的Next js组件之一中有以下代码片段-

import { useRouter } from "next/router";
import Router from "next/router";
import { Menu } from "antd";
export default function AccountMenuList() {
  const router = useRouter();
  function onClick({ key }) {
    switch (key) {
      case "my-account":
        router.push("/profile");
        break;
      case "my-wishlist":
        router.push("/wishlist");
        break;
      case "logout": {
        localStorage.removeItem("user");
        // Router.reload(window.location.pathname);
        router.reload();
        break;
      }
      default:
        break;
    }
  }
  return (
    <Menu onClick={onClick}>
      <Menu.Item key="my-account">MY ACCOUNT</Menu.Item>
      <Menu.Item key="my-wishlist">MY WISHLIST</Menu.Item>
      <Menu.Item key="logout">logoUT</Menu.Item>
    </Menu>
  );
}

在应用程序中，我位于“ / profile”页面上，然后单击注销按钮。我想做的是将网址更改回首页“ /”，并同时进行客户端重新加载。我知道可以使用router.reload（）完成客户端的重新加载。但是，将它与router.push（）一起使用不会更改URL和页面本身。

任何人都可以解释我必须做的事情或错误的想法吗？

解决方法

在这种情况下，我会进行严格的window.location="/"（或显式设置您的基本URL而不是斜杠）。它将把浏览器发送到该URL并重新加载页面。