javascript - 在 Next.js 中进行客户端重新加载和更改 url

Question

我的 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”页面上，然后单击注销按钮。我想要做的是将url更改回主页'/'并进行客户端重新加载。我知道客户端重新加载可以使用 router.reload() 来完成。但是将它与 router.push() 一起使用不会更改 url 和页面本身。

谁能解释我必须在做什么或想错了什么？

Answer 1

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