从“下一个/路由器”导入路由器可以吗？答案

【问题标题】：import Router from 'next/router' is it ok?从“下一个/路由器”导入路由器可以吗？
【发布时间】：2021-09-28 12:20:39
【问题描述】：

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

但是，它没有提到我遇到过几次的事情，即Router 对象，如下访问，例如：

import Router from 'next/router'

Router.push("/")

这样使用Router是否正确？为什么 Next.js 文档没有提到它？

【问题讨论】：

这是他们的示例之一github.com/vercel/next.js/blob/…，但在他们的文档中他们使用 useRouter nextjs.org/docs/api-reference/next/router#routerevents
不同之处在于，在那个例子中（github.com/vercel/next.js/...）Router是在组件之外使用的，所以useRouter或者withRouter不能使用。

【解决方案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 一起使用。所以我的建议只是使用其中之一，它们效果很好?。

【讨论】：