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

【问题标题】：Do a client side reload and change url in Next.js在 Next.js 中进行客户端重新加载和更改 url
【发布时间】：2021-01-19 07:25:09
【问题描述】：

我的 Next js 组件之一中有以下代码 sn-p -:

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 和页面本身。

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

【问题讨论】：

标签： javascript react-router next.js server-side-rendering next-router

【解决方案1】：

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

【讨论】：