Выполните перезагрузку на стороне клиента и измените URL-адрес в Next.js

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-адресу и при этом перезагрузит страницу.