从 'next/router' 导入路由器可以吗？

Question

Next.js 文档提到了两种访问 router 对象的方法：useRouter 用于功能组件，withRouter 用于基于 class 的组件。

但是，它没有提到我遇到过几次的东西，即按如下方式访问的 Router 对象，例如：

import Router from 'next/router'

Router.push("/")

这样使用Router对吗？为什么 Next.js 文档没有提到它？

Answer 1

我想不直接从对象本身使用 Router.push() 或 Router.pathname 的主要建议是因为 Next.js 服务于应用程序。当您尝试这样做时：

import Router from 'next/router';

const HomePage = () => {
  console.log(Router.pathname);

  return (
    <div>hi</div>
  )
}

您将收到错误消息：You should only use "next/router" inside the client side of your app。这是因为 next/router 使用 SSR 的方式。

不过，您可以将它放在 useEffect 中，它会起作用...但这很老套，您将来可能会运行遇到问题。

useRouter和withRouter都是Next.js他们解决这个问题的方法。它们都是构建的，因此它们可以与 SSR 和 CSR 一起工作。所以我的建议是只使用其中之一，它们很好用。

import Router from 'next/router' is it ok?